当前位置： 移动技术网 > IT编程>网页制作>Html5 > Canvas与Image互相转换示例代码

Canvas与Image互相转换示例代码

2019年07月25日  | 移动技术网IT编程  | 我要评论

艾琳·法拉莉,目无全牛,纳萨姆平原

js canvas与image互相转换
原文演示:
在上周的mozilla web开发 会议,最后我们花了大半天的时间讨论未来的mozilla市场应用。instagram是近期最火爆的移动应用,以10亿美元的天价卖给了facebook。
我不介意赚取一些外快,所以我决定创建一个instagram样式的应用(以后将会分享出来)

本文向您展示怎样转换image为canvas，以及canvas如何提取出一个image。

转换 image为 canvas
要把图片转换为canvas(画板，画布),可以使用canvas元素 context 的drawimage方法：

复制代码
代码如下:

// 把image 转换为 canvas对象
function convertimagetocanvas(image) {
// 创建canvas dom元素，并设置其宽高和图片一样
var canvas = document.createelement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getcontext("2d").drawimage(image, 0, 0);
return canvas;
}

转换 canvas 为 image
假设图像已经在canvas上处理好，那么可以使用以下方法，把canvas转变为图片image对象。

复制代码
代码如下:

// 从 canvas 提取图片 image
function convertcanvastoimage(canvas) {
//新image对象，可以理解为dom
var image = new image();
// canvas.todataurl 返回的是一串base64编码的url，当然,浏览器自己肯定支持
// 指定格式 png
image.src = canvas.todataurl("image/png");
return image;
}

额!图像image和canvas的互相转换比你想象的还要容易,以后我将向你演示不同的图像处理技术，相信在未来你肯定能用这些技术赚到大钱。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网