本文摘自PHP中文网,作者不言,侵删。
这篇文章主要介绍了在HTML5 Canvas中放入图片和保存为图片的方法,特别是把图片内容保存为图片,是非常实用的功能,需要的朋友可以参考下使用JavaScript将图片拷贝进画布
要想将图片放入画布里,我们使用canvas元素的drawImage方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
这里的0, 0参数画布上的坐标点,图片将会拷贝到这个地方。
用JavaScript将画布保存成图片格式
如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:
1 2 3 4 5 6 7 8 9 10 11 |
|
这段代码就能神奇的将canvas转变成PNG格式!
这些在图片和画布之间转换的技术可能比你想象的要简单的多哦。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
HTML5和JS实现本地图片裁剪并上传功能
通过HTML5移动开发实现图片压缩上传的功能
以上就是在HTML5 Canvas中放入图片和保存为图片的方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《HTML5》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者