2024年6月1日发(作者：)

将HTML5 Canvas的内容保存为图片转换为

DataURL实现

主要思想是可行的Canvas自己的API-toDataURL（）来实现，囫囵实

=function（）{draw

（）;varsaveButton=mentById

现HTML+JavaScript的代码很容易。

复制代码

代码如下：

（saveImageBtn）;bindButtonEvent（saveButton，click，

saveImageInfo）;vardlButton=mentById

（downloadImageBtn）;bindButtonEvent（dlButton，click，

saveAsLocalImage）;};函数draw（）

{varcanvas=mentById

（thecanvas）;varctx=text（2d）;yle=rgba

（125，46，138，0.5）;ct

（25,25,100,100）;yle=rgba（0，146，

第 1 页 共 2 页

yle=rgba（0，0，0，1）;//黑色xt

（Gloomyfish-Demo，50，50）;}函数bindButtonEvent（element，type，

handler）{if（ntListener）

{ntListener（type，handler，

false）;}else{Event（&39;on&39;+type，handler）;}}

函数saveImageInfo（）{varmycanvas=mentById

（thecanvas）;varimage=URL

（image/png）;varw=（&39;about：blank&39;，

&39;canvasfromcanvas&39;）;（）;

varmyCanvas=mentById（thecanvas）;//这是

最重要的部分，由于假如不举行替换，则会浮现DOM18异样。

//varimage=URL（image/png）。replace（image/png，

image/octet-stream;Content-Disposition：附

件;filename=）;varimage=URL

（image/png）。replace（image/png，

image/octet-stream）;=;////将保存在本地}

保存图像

第 2 页 共 2 页