(2/2)Canvas的交互&amp;存为图片-爬坑篇

2016-08-04 22:50:00

需求介绍

page2上的canvas可交互，并实时显示交互结果；
点击下一步，page2消失，page3显示；
page3显示的是一张图片，图片有canvas交互区和另外的一些元素组成。

实现思路

canvas重绘

运用canvas重绘的方法可以实时同步canvas的交互结果。
canvas重绘：在canvas有交互操作时，先清空画布，将canvas中所有的元素都重新画到画布上；

var fillTextArr = function(el){        //清空画布        el.clearRect(0, 0, width, height);        el.beginPath();        //绘制    };

这里只需绘制封装的cavas元素对象绘制
交互只需操作封装的对象，改变对象的属性，如颜色，文本等。

图片合成

思路

如下图，点击下一步时，将底部元素绘制到cavas，最后将整体canvas取出为图片显示；

合成

合成要进行的操作

将交互区canvas绘制到缓存cachecanvas中
将图片底部绘制到cachecanvas中
cacheCanvas转换为图片

1、3两点都可以用drawImage方法实现

drawImage(_image_, _x_, _y_)drawImage(_image_, _x_, _y_, _width_, _height_)drawImage(_image_, _sourceX_, _sourceY_, _sourceWidth_, _sourceHeight_,          _destX_, _destY_, _destWidth_, _destHeight_)//第一个参数表示  标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。

注：src为base64编码的img对象，在微信ios客户端中，被用做drawImage的第一个参数时，不会绘制到canvas上，且不报错

canvas转换成图片

//取出canvas的Base64编码var dataImg = canvas.toDataURL('image/png');

重置page3中的

；
img标签可以解析base64编码为图片

$('# result').attr('src', dataImg);

BugList

微信中toDataURL的同源限制

微信中执行var dataImg = canvas.toDataURL('image/png');此条语句时，当前的canvas中的图片，不能有跨域的图片资源，例如：

var img = new Image();img.src = "跨域的图片地址"；img.onload = fucntion(){   canvas.drawImage(img,0,0,100,100);}//在微信中时，本行代码不执行。var dataImg = canvas.toDataURL('image/png');

微信长按保存失败

微信安卓客户端长按保存base64编码格式的图片时，保存失败
ios长按保存正常
解决：将base64编码给后台，后台处理成jpg等常用格式的图片，返回图片保存的地址。

ios点击闪烁

原因：移动端click事件造成；
参考信息

解决办法

给canvas添加样式

canvas {  -webkit-tap-highlight-color: rgba(0,0,0,0);}

换成touch事件

由于使用的判断点击位置的方法依赖于:layerX 、layerY、offsetX、offsetY

var getEventPosition =  function(ev){        var x, y;        if (ev.layerX || ev.layerX == 0) {            x = ev.layerX;            y = ev.layerY;        } else if (ev.offsetX || ev.offsetX == 0) { // Opera            x = ev.offsetX;            y = ev.offsetY;        }        return {x: x, y: y};    };

touch事件对layerX 、layerY、offsetX、offsetY支持测试如下(此处未深究，仅供参考)：