对图片进行涂鸦并保存的的功能实现过程

一、功能实现过程难点及解决

1、需求
能够对图片进行圈画，并自动保存

2、技术思路方向：
（1）企业微信和微信api（第一反应，现成的api）
结果：目前企业微信api和微信api均无此功能，网上资源中目前没有查询到可以直接编辑图片的案例或者demo。怎么办呢？
现况：我发现企业微信和微信在上传图片时可以直接对图片进行标注编辑。企业微信在预览时可进行标注保存。
解决方案：于是想到的解决方案时先引导用户保存需要编辑的图片，然后再点击上传图片同时对图片进行标注/编辑上传，或者用户在本地标注好之后在进行上传
（2）canvas绘制

3、canvas绘制
调研结果：网上寻找demo（jQuery，Github），案例可以使用引入背景图的方式对图片直接进行涂鸦，调节笔触大小、颜色，消除，回退，历史操作等基础的功能，可以满足用户的需求。
问题：本地图片换成线上图片
（1）canvas绘出的图转换为线上图片
（2）canvas不支持线上图片，只支持本地图片和base64编码图片
（3）线上图片转换为base64图片跨域问题
img.setAttribute(‘crossOrigin’, ‘anonymous’);
if ( img.complete || img.complete === undefined ) {
img.src = url;
}
canvas 使用的 image 可以跨域，但是 canvas 使用了没有权限的跨域图片，会在使用 canvas.toDataURL()等数据导出函数的时候会报错！具体可以参考 MDN 手册上的说明：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
参考手册会发现最下面的那个if函数是为了使已经缓存的图片生效而准备的，和跨域本身并没有太大的关系。所以其实就是那个 img.crossOrigin = “Anonymous” 做了巨大的贡献，它开启了本地的跨域允许。当然服务器存储那边也要开放相应的权限才行，如果是设置了防盗链的图片在服务端就没有相应的权限的话你本地端开启了权限也是没有用的
（4）线上图片转换为base64图片格式为jpeg，需要png，
绘图的原理是将背景图和涂鸦的图合并在一起，jpeg格式的图不透明，导致只能出现一张图
而png得图支持透明，可以直接覆盖在背景图上面，达到两个图合二为一得效果
base64Img.replace(“jpeg”,“png”);
（5）图片糊的问题
因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 手机的尺寸下直接绘图，相当于图片像素被压缩，因此绘制出来的图片文字等会变模糊。

4、总结
整个实现过程比较坎坷，经过耐心研究，一个一个解决问题，最终实现了业务需求
附：

二、各图片格式得区别

1）.png:
支持透明，颜色比较广，图片质量高，比较常用，是无损压缩的图片，占内存大，网页加载速度慢；
可以利用Alpha通道调节图像的透明度,是网页三剑客之一Fireworks的源文件。

2）.jpg:
不支持透明，占内存小，网页加载速度快，是有损压缩的图片。
是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到2:1甚至40:1)，因为JPEG格式的文件尺寸较小，下载速度快,所以是互联网上最广泛使用的格式!
注： jpg是jpeg的简称。
3）.gif:
最大的特点是不仅可以是一张静止的图片,也可以是动画，并且支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。但是其色域不太广,只支持256种颜色
png: 与JPG格式类似,网页中有很多图片都是这种格式，压缩比高于GIF，支持图像透明，
4）.bmp:
Windows系统下的标准位图格式,未经过压缩，一般图像文件会比较大。在很多软件中被广泛应用。
5）.svg:
它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。它提供了目前网络流行的GIF和JPEG格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价；可在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。可以相信，SVG的开发将会为Web提供新的图像标准。