canvas如何实现多张图片编辑的图片编辑器

前言

图片编辑器虽然是图片涂鸦工具，但是在当前疫情的大背景下，该工具还可以成为老师在线修改学生提交的家庭作业的工具使用的，它可以极大地减轻了老师的批改作业的工作负担，相信这软件是有市场的。
本次不具体介绍canvas的各种操作画布的api,而且相信大家在网上能搜到大量的关于canvas涂鸦的开源代码，即使是这样，我也相信真正把canvas涂鸦用于公司实际的项目的不多，改装成图片编辑器的会更少，而用于多张图片编辑然后多张统一保存、上传的更是寥寥无几。下面，我将在我曾经写过的一个canvas涂鸦的基础上，将多张图片编辑器的开发和思考过程记录下来。

图片编辑器产品需求

先说需求，由于涉及到实际公司的项目开发，满足需求的图片编辑器可能只是编辑一张单独的图片，可能是给你一个图片列表也就是多张图片的编辑，在用户保存之前，用户可以来回切换现在编辑哪张图片，而且要记住每张照片的编辑操作，都要允许可以撤销，最后统一点击保存按钮，没有编辑过的图片将被丢弃，已经编辑过的带着涂鸦的图片上传给服务器。

准备工作，必须了解的相关知识点

html2canvas的使用

html2canvas这个插件实际是将网页上的普通html元素转化成canvas。那么为什么要将html元素转化成canvas呢？那是因为canva具有许多html元素不具备的特点，例如可以在canvas上画图，画线条等等操作，而且canvas直接提供api可以将画布上展示的内容导成图片。是不是有点类似于截图，html2canvas就是利用这一点。 我最开始使用html2canvas时在公司h5项目有一个手写板的项目。需要在是手写板中签字，然后将签字之后的图片导出然后上传。后来又有一个在web端的图片编辑器的项目，又用到了html2canvas这个插件，下面来介绍下该插件

介绍

html2canvas的缺点：

用html2canvas转成的canvas,在最后生成的视觉效果上并不是100%还原原来的元素，也就是说会有部分像素点会丢失。

html2canvas的安装

npm install html2canvas

html2canvas的引入

import html2canvas from 'html2canvas'

html2canvas的使用

如果一个带图片（无论是img标签还是背景图）的html元素在转成canvas之后，该生成的canvas中img或者背景图缺失，变成了白色的底，并且控制台都告诉你图片跨域了，解决方案如下：
以下第1条必须满足，然后第2、3是根据是html元素是img标签还是背景图，来添加不同的配置项。

1.图片服务器配置Access-Control-Allow-Origin 或使用代理
2.html2canvas的配置项中配置useCORS:true
3.img标签增加 crossOrigin='anonymous'

html转canvas,并且解决图片跨域问题

html2canvas(dom, {
  useCORS: true, // 背景图片跨域
  scale: window.devicePixelRatio,//像素比
  width: dom.offsetWidth
  height: dom.offsetHeight
}).then(canvas => {
  //得到base64
  let base64 = canvas.toDateUrl() 
})

因为html2canvas将普通的html转成了canvas,而canvas自带将自身转成的base64的方法，而base64格式文件可以直接作为img标签的src,展示在页面上

<img :src='base64' />

此时如果希望将生成的图片上传，base64是无法直接上传的，需要将base64转成blob格式。所以如下：我们将得到的base64数据传进base64ToBlob函数，最后函数return的结果就是blob数据。请注意：该方法只是单纯的将base64转成blob的通用方法

base64转blob

function base64ToBlob(base64){
    var arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return (new Blob([u8arr], { type: mime }))
}

其实canvas自带将canas转化成blob对象的方法

canvas转blob

canvas.toBlob(file=>{
    //此时file就是blob数据格式。
    //成功上传成blob之后需要为该blob数据添加name属性，否则后面上传到服务器会报错：size not set
    file.name = 'cover.png'
})

但是在实际项目开发中遇到部分低版本的手机浏览器中的canvas元素不支持toBlob方法，报错toBlob is not a function。所以此时我们需要对当前不支持canvas.toBlo方法的浏览器做polyfill

DOM canvas元素暴露了HTMLCanvasElement接口,该接口提供了用来操作一个canvas元素布局和呈现的属性和方法HTMLCanvasElement接口继承了element接口的属性和方法。(来自MDN)

toBlob方法兼容性写法

if (!HTMLCanvasElement.prototype.toBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value: function (callback, type, quality) {
        var binStr = atob(this.toDataURL(type, quality).split(',')[1])
        var len = binStr.length
        var arr = new Uint8Array(len)

        for (var i = 0; i < len; i++) {
          arr[i] = binStr.charCodeAt(i)
        }

        callback(new Blob([arr], { type: type || 'image/png' }))
     }
    })
}

以上代码判断当前浏览器HTMLCanvasElement.prototype内是否含有toBlob方法，如果没有该方法，则为HTMLCanvasElement.prototype添加toBlob方法。
到目前为止，无论是base64直接转成blob，还是canvas直接转成blob，最后目的都是为了将blob数据上传到服务器。请注意：当前页面的blob数据是存储在缓冲区的，而不是像电脑本地文件存储在硬盘中上传那样，所以需要添加 isLocalFile:false属性，fileData属性接收一个数组，如果是一张图片，则是个长度为1的，元素为blob格式的数组。上传文件到服务器在这里不做介绍。

提交blob到服务器

// 转完图片数据，提交服务器
    async upload (blobArr) {
      const oss = await this.$uploadOSS.init({
        fileData: blobArr,
        isLocalFile: false,
        onProgress: percent => {},
        onSuccess: (res) => {
          console.log(res)
        }
      })
      if (oss) {
        const data = await oss.start()
        if (!data.code) {
          this.$message.error(data.message)
        }
      }
    },

以上是对html2canvas好和canvas的常见的属性的介绍，同时也是开发图片编辑器的前提。下面会一步步详细介绍下在已有的canvas涂鸦板的基础上的开发多张图片编辑器的思路和过程。

基于canvas的图片编辑器的怎么做？

1、既然要编辑图片，自然要提供给我们的图片的地址，可能是本地相对路径，也可能是远程地址，也可能是一张或者是多张图片。所以进行操作的数据结构是数组，如果只有一张图那就是长度为1的，元素为图片地址的数组，另外需要解决图片跨域来避免生成的图片只有涂鸦部分，且背景白色、头像或者图片丢失的情况，上面已经提供了详细的解决方案。

2、图片编辑器肯定是个通用组件，所以根据父组件传进来的图片src的一个长度为length的数组,来填充一个相同长度的二维数组，二维数组中的元素记录的是每一张图片被编辑的历史记录的集合，也就是每一次操作canvas的时候生成的base64数据，在开始编辑之前初始化的时候该图片默认填充空数组[],在这里介绍一个填充数组很好用的方法fill，值得注意：fill的内容如果是引用类型，会导致fill的每一项都是同一个引用，导致在操作其中一个元素时，其余所有的元素都一起改变。

//result：[[],[],...]
this.canvasArrBase = Array(length).fill(0).map(item => {
  return []
})

2、点击不同的图片,将该图片的src传进编辑器组件，并将该src作为canvas背景图,此时视觉上看到了一图，在dom中其实是canvas的一张背景图为src。
3、开始在页面涂鸦画布，为了避免无法在surface等触控屏设备上使用画布涂鸦或者图片编辑器，请使用touch事件，而不是mouse事件。

// 开始绘制
  canvas.addEventListener('touchstart', e=> {
    ...
  },false)
  
  // 绘制中
  canvas.addEventListener('touchmove', e=>{
   ...
  },false)
  
  // 结束绘制
  canvas.addEventListener('touchend', e=>{
    ...
  },false)

4、在进入图片编辑器之前将点击的图片的索引和图片所在的图片数组，一起作为props传入图片编辑器，记住当前在编辑第几张图片currentIndex,才能将涂鸦或者撤销操作都记录在这张图片之上。当用户在画布上每操作一次，也就是开始touchstart，然后touchmove，最后touchend的时候，将当前的canvas画布的内容（所有内容，不只是刚刚涂鸦的那一笔。类似于git的每一次提交，即使只是提交一行代码，git也都会为整个项目生成一份快照，而不只是记录本次修改的一行代码，git回滚就是快照的回滚），包括这张背景图片使用canvas.toDateUrl()生成base64，将其push进我们上面介绍的this.canvasArrBase[currenIndex]里，这时currenIndex所在数组的图片多了一张历史记录，也就是刚刚涂鸦的画面被我们保存下来了。这也就是canvas图片编辑器，撤销的基础，有了它我们才知道撤销之后展示什么。

//新的土涂鸦操作生成的快照存储在当前索引的数组内
 this.canvasArrBase[this.currentIdex].push(canvas.toDataUrl())

5、切换图片也就意味着改变了canvas的背景图，改变了currentIndex,然后在新的currentIndex上对另外一张图片进行编辑，其实也是同样的步骤，无非就是往当前编辑的图片的push画布刚刚展示的所有内容。
6、重点来了，撤销如何做呢？如何撤销，如何在画布上一步步撤销并且看到上一次，上上次的绘画记录呢？
随着每张图片的编辑，每张图片产生一些历史记录，我们就是利用这些历史记录的来进行回滚撤销操作的。当我们在当前已经编辑过的图片中点一次撤销的时候，我们需要将上次canvas中展示的画布内容画到当前的画布中。在撤销的时候可以直接将我们存储的数据源直接删掉，所以只需要利用 canvas.drawImage() 方法，将需要展示的那一条记录画到canvas画布中即可。

drawImage方法有很多参数，用法点击查看详情

let newBaseArr = this.canvasArrBase[this.currentIdex]
let { offsetWidth: canvasWidth, offsetHeight: canvasHeight } = canvas

//生成一张新的图片
let image = new Image()

//图片的src赋值成当前需要展示的base64的值（也就是让用户看到撤销后的画面）
image.src = this.canvasArrBase[this.currentIdex][newBaseArr.length-1]
//给img的src赋值后，使用onload监听加载图片情况，加载完成后再绘制,不加onload就极可能绘制失败。
image.onload = function () {
    canvas.drawImage(image, 0, 0, canvasWidth, canvasHeight)
}

7、关于性能优化：由于你根本不知道用户会拿多么大的图片来进行编辑，所以如果有9张图片，每张图片都编辑10次，那么存在内存中的base64数据量就会非常庞大，在进行页面切换或者图片涂鸦历史撤销的时候就可能造成页面的卡顿，为了避免这种情况，在切换图片之前，我只会存储当前图片最后一张图片的base64。
8、提交，保存之前判断this.canvasArrBase中每一项的长度，大于0，则是有编辑过，否则被过滤掉。然后利用前面介绍上传方法上传到服务器，就OK啦！

总结

在学习canvas的道路上它总能给我带来一些惊喜和惊讶，一些我们熟知的工具，例如：echart,高德地图等无一不是基于canvas做出的。我曾经有位同事是一位echart图表大神，受他的影响，我逐渐对echart的威力有所领略，希望在这样一个开源社区里和大家一起学习，进步。

到此这篇关于canvas如何实现多张图片编辑的图片编辑器的文章就介绍到这了,更多相关canvas图片编辑器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！