Canvas 的已创建图像尚未附加到 html 容器

Question

我有一个canvas。现在我想制作 canvas 的图像。我已经开发了这个功能。我有一张带有正确 src 属性的图像。但是，如果我想将此图像元素附加到 html-容器，它就不起作用。没有任何反应。

我不知道为什么。 html-容器可用，图像正确。

这是一些代码：

创建图片的函数

function createPicture(canvas, container){
    
    let dataURL = canvas.toDataURL({
        width: canvas.width,
        height: canvas.height,
        left: 0,
        top: 0,
        format: 'jpeg',
    });
    
    let image = new Image();
    image.setAttribute("src", dataURL);

    container.append(image);
}

调用这个函数

createPicture(canvas, $("#test"));

控制台中的图像：

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…">

Answer 1

您的代码对我来说工作正常，请参阅下面的示例

function createPicture(canvas, container){
    let dataURL = canvas.toDataURL({
        width: canvas.width,
        height: canvas.height,
        left: 0, top: 0,
        format: 'jpeg',
    });
    
    let image = new Image();
    image.setAttribute("src", dataURL);
    container.append(image);
}

let co = document.getElementById("container")
let ca = document.getElementById("canvas")
var ctx = ca.getContext("2d");
ctx.rect(10, 10, 80, 60);
ctx.arc(50, 50, 30, 0, 4);
ctx.stroke();

createPicture(ca, co)

canvas { 
  border: 3px solid blue;
}
div { 
  border-color: red;
  border-style: solid;
  width: 100px;
  height: 100px;
}

<canvas id="canvas" width=100 height=100></canvas>
<div id="container"></div>

我唯一能想到的是你在调用 createPicture 之后正在对你的 canvas 做一些事情并期望它在那里，如果你仍然运行遇到问题我会建议你创建一个重现您的问题的代码片段，然后 post 在此处

检查您的开发控制台，确保您看到图像元素：

如果你没有看到它，那么问题一定是容器

Canvas 的已创建图像尚未附加到 html 容器

Created Image of Canvas haven't get appended to html container

jquery

canvas

todataurl