首页 > 其他 > 详细

image 与 canvas 的相互转化

时间:2016-03-26 10:51:15      阅读:115      评论:0      收藏:0      [点我收藏+]

转换 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 的相互转化

原文:http://www.cnblogs.com/hyh123/p/5322282.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!