前端vue实现上传图片打马赛克功能

实现对图片打马赛克的原理，还是基于canvas实现的。这里，我们实用的插件是image-mosaic。
那么，首先来安装image-mosaic。

npm install image-mosaic -D

在页面创建一个canvas，用来绘画操作图片，再新建两个按钮，一个为了方便操作，点击即全部打上马赛克。另一个，点击即清除所有马赛克效果。
具体代码如下：

<div id="box">
      <canvas id="canvas"></canvas>
      <button id='drawAll'>Mosaic All</button>
      <button id='clearAll'>Clear Mosaic</button>
</div>

在页面里引入image-mosaic，

import Mosaic from 'image-mosaic'

将你要操作的图片绘制在canvas上，绘制的大小和比例根据你图片的原始宽高来决定。
绘制图片到canvas 的代码如下：

	drawImageToCanvas (imageUrl) {
      const canvas = document.querySelector('#canvas')
      const ctx = canvas.getContext('2d')
      return new Promise((resolve, reject) => {