javascript canvas.toDataURL(“image/jpeg”)无法在.drawImage()中使用

iqxoj9l9 于 2023-05-21 发布在 Java

关注(0)|答案(1)|浏览(129)

我尝试使用canvas.toDataURL("image/jpeg")捕获画布屏幕，然后在ctx.drawImage();中使用它，但它给出错误“Uncaught TypeError”，说不支持图像格式。哪种格式

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.rect(0,0, 100, 100);
ctx.fill();

const test = canvas.toDataURL("image/jpeg");

ctx.fillStyle = "white";
ctx.beginPath();
ctx.rect(0,0, 100, 100);
ctx.fill();

ctx.drawImage(test, 0, 0); //Uncaught TypeError

<canvas id="canvas"></canvas>

我用.toDataURL()来修复它？

JavaScript

来源：https://stackoverflow.com/questions/76296720/canvas-todataurlimage-jpeg-cant-be-used-in-drawimage

1条答案

按热度按时间

vq8itlhq1#

问题是test是一个字符串。

const image = new Image()
image.addEventListener('load', () => {
    ctx.drawImage(image, 0, 0)
})
image.src = test

在上下文中：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.rect(0, 0, 100, 100)
ctx.fill()

const test = canvas.toDataURL('image/jpeg')

ctx.fillStyle = 'white'
ctx.beginPath()
ctx.rect(0, 0, 100, 100)
ctx.fill()

const image = new Image()
image.addEventListener('load', () => {
  ctx.drawImage(image, 0, 0)
})
image.src = test

<canvas id="canvas"></canvas>

赞(0）回复(0）举报 2023-05-21

我来回答

javascript canvas.toDataURL(“image/jpeg”)无法在.drawImage()中使用

1条答案

相关问题

热门标签

最新问答