Canvas绘制、合并、保存图像以及存在的问题

作者: 想酷却酷不起来 | 来源:发表于2017-07-21 13:45 被阅读251次

Canvas绘制、合并、保存图像以及存在的问题
Canvas
HTML5 - Canvas
图片的放大与缩小
棋盘实现
细说 Canvas API（一）
浅析HTML5的Canvas——案例绘制
html5 canvas入门知识
047_wz_hm_项目实战——飞机大战之图像绘制
drawText详解

最近帮学校官方微信做了一个头像合成的小页面，用户可以自己选择本地照片，上传并裁剪后，与学校logo合成最终图片，用户可以长按保存到本地，同样，我也把他放到了GitHub，效果大概下面这个样子。因为有官方微信的推广，点击量分分钟过5千，虽然是个很一般的东西，自己写的代码也很一般，都是看着朋友圈很多人用着通过自己写的制作器做的头像，感觉很棒哦。

test.gif
这个页面全部在前端完成，因为HTML5的强大，我没写一句后台代码，此外非常感谢这么优秀的开源项目Cropper.js，为我们提供了这么好的裁剪插件。但是在做的过程中，还是遇到了不少问题，特别是canvas绘的图在手机等高分辨率设备上，会变模糊的问题，所以还是有必要总结一下。

Canvas绘图API使用

关于canvas的其他知识自行查阅API，今天直接上手canvas绘制图像。你需要知道
1.canvas的width和height 和css 的width和height不是一回事

image.png

image.png
可以看出canvas的css width,height分别为400px,画布width,height为200，200是把css像素分成了200份，所以填充宽度为100，却占了csswidth的1/2.
结论(假设cx指画布长度单位)

canvas画布的默认宽高300*150
css width和height决定你在屏幕上占多大空间，在你不设置的时候，默认和画布大小一致
当你的css宽高和画布宽高不一样时，会有一个兑换关系，这会导致一些奇怪的问题。比如说css width:450px;height:300px; 画布没有设置的话。默认300cx150cx，所以水平方向1cx=450/300=1.5px 垂直方向1cx=300/150=2px 。所以你这个时候画一个100100的正方形，画出来的是1.5100，2100的长方形，人家本来是我们数学里学的标准坐标轴，你强行让人家单位长度不同了。所以如果没有必要，不要修改canvas的css width和height,这时候1cx=1px,而且水平方向和垂直方向是一样的，如果你非要改，起码让他们比例一样，即水平方向1cx等于几个px,在垂直方向保持一致
在canvas里绘图，用到的所有长度单位都是指cx.默认情况下，1cx=1px.

2.看绘图上下文提供的相关API

context.drawImage(image,x,y)
x，y为画布中画图的起始坐标，用此方法绘制出的图像与原图大小一致，即如果图片尺寸为640320，那么即640cx320cx，默认cx=px
context.drawImage(image,x,y,w,h)
w,h指绘制出来的图像的宽度与高度，比例与原图宽高最好一致，图像不会变形。
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
此方法可用于绘制图像的局部区域，sx,sy为局部区域的起始点坐标，sw,sh为局部区域的宽高。(sx,sy,sw,sh) 与(dx,dy,dw,dh)没有关系，前者表示从哪里截取，取多大，后者表示你要在哪里放，在多大的地方放，可以放大或者缩小。如可以用于局部放大，实现特写效果
上述方法中的image 均指image对象
```
var img=new Image();
img.src="" //指定url
img.onload=function(){
   //绘制图像
}
```

3.实现图像组合
用canvas实现图像组合也很简单，可以通过设置图形上下文的globalCompositeOperation 属性来决定图像组合模式
如我实现这个图像合成的效果，我想要的logo不动，然后用户图像绘制在其下方。

image.png

其他模式还有很多，请自行查阅API
4.如何将canvas绘制的图形保存成图片
其实canvas绘制的任何东西都可以保存为图片，代码也很简单

var oCanvas=document.getElementById("myCanvas");
var src=oCanvas.toDataURL("image/png") ;
//然后你就可以随便怎么利用，你可以利用HTML5 a标签 download属性，也可以将其通过img标签展示到
//页面，然后长按/右键保存到本地

利用canvas在高清屏绘制图像的大坑

一开始没有发现这个问题，但是发给别人头像制作器的链接，别人跟我说生成的头像太模糊了，我自己试了下，的确很模糊，于是就百度了下，还好这是一个有目共睹的坑，所以一百度就找到了解决办法。
出现这个问题的原因就是，在手机等高清屏设备上，存在一个devicePixelRatio，这个东西对于搞移动端web开发还是比较重要的，你在开发移动端网页是，开头常常会写一个name为viewport的标签也与这个东西有关。详情请看我的移动端开发必须知道的viewport
解决办法也很简单，先通过hidpi-canvas-polyfill提供的函数获得PixelRatio

var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
};

然后，将canvas画布宽高先扩大PixelRatio 倍，然后再用css将宽高缩小到原来的宽高。经测试，当原图比画布大小大时，此方法比不用此方法清晰的多，当原图大小与canvas大小一样时，这个问题不是很明显。