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

HTML5 本地裁剪图片并上传至服务器 canvas图片上传 canvas图片裁剪

很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的。但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要...
  • u014071104
  • u014071104
  • 2016年05月26日 11:03
  • 4331

Canvas与Image互相转换示例代码

JS Canvas与Image互相转换  原文演示: JavaScript Canvas Image Conversion Demo 在上周的Mozilla Web开发 会议,最后我们花了大半天的时...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2014年08月12日 22:09
  • 1520

Image与Canvas相互转换

// 把image 转换为 canvas对象 function convertImageToCanvas(image) { // 创建canvas DOM元素,并设置其宽高和图片一样 va...
  • rnZuoZuo
  • rnZuoZuo
  • 2014年05月07日 22:39
  • 721

canvas和image互相转换

转载:http://www.cnblogs.com/sapho/p/6143819.html1. 把img转换为canvas对象复制代码 function convertImageToCanvas(i...
  • u013223198
  • u013223198
  • 2017年05月09日 11:47
  • 365

Canvas与Image互相转换

JS Canvas与Image互相转换 原文地址: JavaScript Canvas Image Conversion 原文演示: JavaScript Canvas Image Conve...
  • renfufei
  • renfufei
  • 2013年08月09日 14:48
  • 30853

JavaScript基础——使用Canvas绘图

HTML5添加的最受欢迎的功能就是元素。这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形。元素最早是由苹果公司推出的,当时主要用在其Dashboard中。...
  • Goskalrie
  • Goskalrie
  • 2016年08月03日 10:48
  • 2311

用JavaScript实现canvas和image的相互转换

使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawImage方法:// Converts image to canvas; returns new can...
  • idomyway
  • idomyway
  • 2017年11月14日 18:57
  • 218

WPF动态创建Image的显示问题

最近学习WPF,看到一篇教程讲解如何动态创建Image控件,自己练手时候无论如何也显示不出图片。刚开始以为是图片的路径有问题,可后来将图片的路径设为相对路径或者绝对路径都没有解决问题。于是开始在网上搜...
  • pigautumn
  • pigautumn
  • 2016年03月24日 14:57
  • 4239

JavaScript之Canvas画布

HTML5有个强大的功能,就是利用canvas进行画图。
  • h15882065951
  • h15882065951
  • 2017年04月18日 23:10
  • 2542

Canvas中的drawImage

Canvas drawImage
  • zhaoruda
  • zhaoruda
  • 2017年04月18日 22:17
  • 989
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Study JavaScript《Canvas Image相互转换》
举报原因:
原因补充:

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