Canvas与Image怎么互相转换

今天小编给大家分享一下canvas与Image怎么互相转换的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

复制代码

代码如下:

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

return image;

}

以上就是“Canvas与Image怎么互相转换”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网VUE频道。