在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 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 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
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
python 代码运行时间获取方式详解
2020/09/18 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
销售代表求职自荐信
2013/10/01 职场文书
爬山的活动方案
2014/08/16 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
工程部部长岗位职责
2015/02/12 职场文书
爱心募捐通知范文
2015/04/27 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL