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

原创 2017年11月14日 18:57:51

使用JavaScript将图片拷贝进画布

要想将图片放入画布里,我们使用canvas元素的drawImage方法:

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

用JavaScript将画布保持成图片格式

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

相关文章推荐

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

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

canvas和image互相转换

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

浅谈JavaScript和Canvas实现彩色图片转换成黑白图片

1、convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage 将...

canvas保存为data:image扩展功能的实现

【已知】   canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式,jpeg格式的现代浏览器基本也支持,但是支持的...
  • jyb2014
  • jyb2014
  • 2014年07月22日 18:07
  • 205

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

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

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对象,赋值给相应的控件显示。 ...

javascript从image转换为String

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

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

/******************************************************************************/ /******************...
  • cvMat
  • cvMat
  • 2016年12月16日 15:49
  • 1769
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用JavaScript实现canvas和image的相互转换
举报原因:
原因补充:

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