功夫码

将canvas图像保存成本地图片的方法

晓峰 时间:2020-11-14 11:17:54 阅读:35
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

将canvas图像保存成本地图片的方法


使用HTML5画布技术,你可以在浏览器客户端用JavaScript绘制出各种美丽酷炫的图案,这些图案是不能直接保存的,本身也不是图片形式。

幸运的是,画布(canvas)对象有一个非常有用的方法:toDataURL()。这个方法能把画布里的图案转变成base64编码格式的png,然后返回 Data URL数据。


var strDataURI = oCanvas.toDataURL();

// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

而且,如果你给toDataURL()传入mine类型的参数,你还可以将画布转变成其它格式的图片。


var strDataURI = oCanvas.toDataURL("image/jpeg");

// returns "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..."

现在,有了 Data URL数据后,我们可将这些数据直接填充到 元素里,或者我们可以直接从浏览器里下载它们。



--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

  • 回到顶部