Study JavaScript《Canvas Image相互转换》

转载 2015年11月20日 00:47:11

JS Canvas与Image互相转换

Convert an Image to Canvas with JavaScript

To convert an image to canvas, you use a canvas element's context's drawImage method:

// 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);

	return canvas;
}

The 0, 0 arguments map to coordinates on the canvas where the image data should be placed.

Convert Canvas to an Image with JavaScript

Assuming modifications to the image have been made, you can easily convert the canvas data to image data with the following snippet:

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");//返回的是一串Base64编码的URL
	return image;
}

The code above magically converts the canvas to a PNG data URI!

 

注:本文摘自 http://davidwalsh.name/convert-canvas-image

相关文章推荐

canvas和image互相转换

转载:http://www.cnblogs.com/sapho/p/6143819.html1. 把img转换为canvas对象复制代码 function convertImageToCanvas(i...

canvas study

Study of JPEG Image Compression 图像压缩

1. Introduction Image compression is reducing the amount of data required to represent a digital im...

Image与byte[]数组的相互转换

最近项目有个需求是关于图片操作的,需要将图片保存到数据库中,经过尝试才知道Image类型文件是不能直接存储到数据库中的。保存之前需要我们做一步转换:将Image转换成字节数组类型Byte[]。转换需要...

【重要总结】IntPtr、Image以及IplImage三者之间的相互转换

/******************************************************************************/ /******************...
  • cvMat
  • cvMat
  • 2016-12-16 15:49
  • 1502

byte数组与Image的相互转换

功能需求: 1、把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库。 2、把从数据库读取的byte数组转换为Image对象,赋值给相应的控件显示。 ...

C# byte数组与Image的相互转换

功能需求: 1、把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库。 2、把从数据库读取的byte数组转换为Image对象,赋值给相应的控件显示。 ...

C#:Image与byte数组的相互转换

Image to byte[];byte[] to Image;

【重要总结】IntPtr、Image以及IplImage三者之间的相互转换

/******************************************************************************/ /******************...

javascript从image转换为String

最近需要把app的微信分享方法开
  • mmbhs
  • mmbhs
  • 2014-07-28 13:31
  • 408
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)