在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开启硬件加速的使用和坑
Aug 21 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 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
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
快速查询Python文档方法分享
2017/12/27 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python日期相关操作实例小结
2019/06/24 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
精伦电子Java笔试题
2013/01/16 面试题
实习自我鉴定模板
2013/09/28 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
教师校本培训方案
2014/02/26 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
cf战队宣传语
2015/07/13 职场文书
领导新年致辞2016
2015/07/29 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫