在vue项目中实现图片打马赛克

使用image-mosaic插件。

安装依赖

npm install image-mosaic -D

项目引用

// .vue 文件
<div id="box"><canvas id="canvas"></canvas><button id='drawAll'>一键加码</button><button id='clearAll'>还原</button>
</div>

import Mosaic from 'image-mosaic'data() {return {imgSrc: 'xxxx'}
},
created() {this.initMosaic()
},
methods： {drawImageToCanvas () {const canvas = document.querySelector('#canvas')const ctx = canvas.getContext('2d')let imageUrlif (this.imgSrc) {imageUrl = this.imgSrc}return new Promise((resolve, reject) => {const image = new Image()image.crossOrigin = 'Annoymous'image.onload = function () {canvas.width = image.widthcanvas.height = image.heightctx.drawImage(this, 0, 0, image.width, image.height)resolve(ctx)}image.src = imageUrl})},initMosaic () {this.drawImageToCanvas().then(ctx => {const mosaic = new Mosaic(ctx)const MouseEvents = {init () {mosaic.context.canvas.addEventListener('mousedown', MouseEvents.mousedown)},mousedown () {mosaic.context.canvas.addEventListener('mousemove', MouseEvents.mousemove)document.addEventListener('mouseup', MouseEvents.mouseup)},mousemove (e) {if (e.shiftKey) {mosaic.eraseTileByPoint(e.layerX, e.layerY)return}mosaic.drawTileByPoint(e.layerX, e.layerY)},mouseup () {mosaic.context.canvas.removeEventListener('mousemove', MouseEvents.mousemove)document.removeEventListener('mouseup', MouseEvents.mouseup)}}MouseEvents.init()document.querySelector('#drawAll').addEventListener('click', () => {mosaic.drawAllTiles()})document.querySelector('#clearAll').addEventListener('click', () => {mosaic.eraseAllTiles()})})}
}

实现功能：

画笔式拖动打码、一键全局打码、还原功能

如果需要获取打码后的图片，可以采用以下方式

var dataURL = document.querySelector('#canvas').toDataURL('image/png')

在vue项目中实现图片打马赛克相关推荐

vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
Vue 项目中 Cropper 图片裁剪的使用及遇到的问题
为什么用个人中心的头像上传需要对图片进行裁剪 1.安装引入 npm install vue-cropper 在 main.js 中 import VueCropper from 'vue-cropp ...
vue项目中背景图片写成行内样式不显示
今天写代码的时候发现把背景图片写在行内样式中没法显示 <div class="template-card" style="background-image:url( ...
Vue项目中使用图片裁切器 cropperjs (头像裁切)
cropperjs官方文档 cropperjs结合element-ui 组件后的显示效果: 1. npm 安装 cropperjs cmd命令行输入:npm install cropperjs --s ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法
vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展. // 根据文件名后缀区分文件类型/** @param: fileName - 文件名称* @ ...
svg图片在vue项目中的应用
svg图片在vue项目中的应用一.安装 svg-sprite-loader 插件 npm install svg-sprite-loader 二.基于 vue-cli2.x 项目 webpack 配 ...
vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...

在vue项目中实现图片打马赛克

在vue项目中实现图片打马赛克

安装依赖

项目引用

实现功能：

在vue项目中实现图片打马赛克相关推荐

最新文章

热门文章