在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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 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实现的在线人员函数库
2008/04/09 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
python if not in 多条件判断代码
2016/09/21 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
高中体育教学反思
2014/01/24 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
保研推荐信
2014/05/09 职场文书
新教师岗前培训方案
2014/06/05 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
家长会开场白和结束语
2015/05/29 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python