IVY DOM


 

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
优质美国空间-老薛主机|IVY DOM|Flowline|

联系我

RSS




三月 08, 2016

HTML5 canvas图像开发之多图层单个保存问题

HTML5的canvas可以直接覆盖,但当单个保存图层时会发生上一层图层附带下一层图层图像问题

解决办法是使用getImageData获得图像二进制数据,这个二进制数据是单独的canvas图像数据

再使用putImage将二进制数据绘制到新的canvas上,最后使用toDataURL转换为base64代码即可


getLayerDataURL: function(canvas) { var cxt = canvas.getContext('2d'); var oldData = cxt.getImageData(0, 0, canvas.width, canvas.height);//获得二进制数据 var newCanvas = document.createElement("canvas"); newCanvas.width = canvas.width; newCanvas.height = canvas.height; newCanvas.id = "tmpLayer"; document.body.appendChild(newCanvas);//创建新的canvas var newCxt = newCanvas.getContext("2d"); newCxt.putImageData(oldData, 0 ,0);//将之前的二进制数据写到新的canvas上 var data = newCanvas.toDataURL();//转换为base64 newCanvas.parentNode.removeChild(newCanvas);//删除新创建的canvas return data; }

相关文章

返回
  1. 暂无评论。

  1. 暂无 Trackback

You must be logged in to post a comment.