html5 canvas 转换图片,将HTML5 Canvas的内容保存为图片转换为DataURL实现

主要思想是可行的Canvas自己的API-toDataURL()来实现，整个实现HTML+JavaScript的代码很简单。

复制代码

代码如下：

ctx.fillStyle=“rgba(0，0，0，1)”;//黑色ctx.fillText(“Gloomyfish-Demo”，50，50);}函数bindButtonEvent(element，type，handler){if(element.addEventListener){element.addEventListener(type，handler，false);}else{element.attachEvent('on'+type，handler);}}函数saveImageInfo(){varmycanvas=document.getElementById(“thecanvas”);varimage=mycanvas.toDataURL(“image/png”);varw=window.open('about：blank'，'canvasfromcanvas');w.document.write(“”);

varmyCanvas=document.getElementById(“thecanvas”);//这是最重要的部分，因为如果不进行替换，则会出现DOM18异常。//varimage=myCanvas.toDataURL(“image/png”)。replace(“image/png”，“image/octet-stream;Content-Disposition：附件;filename=foobar.png”);varimage=myCanvas.toDataURL(“image/png”)。replace(“image/png”，“image/octet-stream”);window.location.href=图片;将保存在本地}

保存图像