canvas与image互转-静水博客

canvas与image互转

2017/06/08 标签： 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",0.8);//0.8即压缩比例
	return image;
}

//canvas.toBlob(function(blob){
//xhr上次 Blob.slice()分片上传。
//        
//});

上一篇: JavaScript深入之继承的多种方式和优缺点【转载】

下一篇: html2canvas将dom转为canvas

静水缘首页

刘丕水+宋静静于2007年9月相识于山东理工大学，毕业后2011年相恋，共甘苦，历时四年，终于在11月23号拿到了红本本，组建了自己的小家庭......

快速发布

静水缘首页

文章分类

最新文章