使用javascript来互相转换画布canvas和图片image

最新推荐文章于 2022-12-19 20:42:19 发布

原创最新推荐文章于 2022-12-19 20:42:19 发布 · 305 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

转载文章同时被 3 个专栏收录

24 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

html5

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现图片(image)与画布(canvas)之间的相互转换。具体包括：利用drawImage方法将图片转换为画布；通过toDataURL方法将画布转换为图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用javascript的drawImage方法可以方便的将图片image转换为画布canvas，如下

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

2.同时也可以用以下代码来将画布canvas转化为图片image，如下：

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