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

使用js转化画布与图片(canvas与img)

1、使用JavaScript将图片拷贝进画布 将图片放入画布里,使用canvas元素的drawImage方法即可:// Image to canvas; returns new canvas elem...
  • muzi187
  • muzi187
  • 2016年11月03日 11:59
  • 4091

Canvas---Canvas图像加载、利用javascript回调机制实现一个图片加载器

canvas的drawImage方法有个缺点,就是当图片还未加载完成时调用它将无效。 当然,在高速运转的游戏主循环中,可以直接忽略这个问题,或者用 img.complete == true来做下判断。...

canvas和image互相转换

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

Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能

Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能 现在扫描二维码已经很普遍,微信扫一扫即可,但是如果二维码是在自己的手机上呢?那就要用到微信里的一...

Study of JPEG Image Compression 图像压缩

1. Introduction Image compression is reducing the amount of data required to represent a digital im...
  • ccj5351
  • ccj5351
  • 2014年05月31日 04:15
  • 1784

canvas study

  • 2015年01月25日 20:21
  • 8KB
  • 下载

javascript从image转换为String

最近需要把app的微信分享方法开
  • mmbhs
  • mmbhs
  • 2014年07月28日 13:31
  • 438

[C#] Byte[]、Image、Bitmap 之间的相互转换

/// /// 将图片Image转换成Byte[] /// /// image对象 /// 后缀名 /// ...

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

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

byte数组与Image的相互转换

功能需求: 1、把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库。 2、把从数据库读取的byte数组转换为Image对象,赋值给相应的控件显示。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Study JavaScript《Canvas Image相互转换》
举报原因:
原因补充:

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