前言
图片编辑器虽然是图片涂鸦工具，但是在当前疫情的大背景下，该工具还可以成为老师在线修改学生提交的家庭作业的工具使用的，它可以极大地减轻了老师的批改作业的工作负担，相信这软件是有市场的。 本次不具体介绍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)
123下一页
