在HTML5 Canvas中放入图片和保存为图片的方法


Posted in HTML / CSS onMay 03, 2014

使用JavaScript将图片拷贝进画布

要想将图片放入画布里,我们使用canvas元素的drawImage方法:

复制代码
代码如下:

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);</p> <p> return canvas;
}

这里的0, 0参数画布上的坐标点,图片将会拷贝到这个地方。

用JavaScript将画布保存成图片格式

如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:

复制代码
代码如下:

// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}

这段代码就能神奇的将canvas转变成PNG格式!

这些在图片和画布之间转换的技术可能比你想象的要简单的多哦。

HTML / CSS 相关文章推荐
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 #HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 #HTML / CSS
HTML5中5个简单实用的API
Apr 28 #HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
php DES加密算法实例分析
2019/09/18 PHP
json原理分析及实例介绍
2012/11/29 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python实现类之间的方法互相调用
2018/04/29 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
详解Django中间件执行顺序
2018/07/16 Python
python:接口间数据传递与调用方法
2018/12/17 Python
pybind11在Windows下的使用教程
2019/07/04 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python机器学习库xgboost的使用
2020/01/20 Python
python实现最短路径的实例方法
2020/07/19 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
药店促销活动策划方案
2014/08/24 职场文书
2014年底工作总结
2014/12/15 职场文书
毕业欢送会致辞
2015/07/29 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
MySQL事务的隔离级别详情
2022/07/15 MySQL