Canvas Haven的创建图像将附加到HTML容器

Question

我有画布。现在，我想制作画布的图像。我已经开发了这个功能。我有一个与正确的SRC-Attribute的图像。但是，如果我想将此图像元素附加到html-container上，则它不起作用。什么都没有发生。

我不知道为什么。 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称为期望在那里的createpicture后在画布上做某事，如果您仍然遇到问题，我建议您创建一个代码代码来重现问题，并在此处将其发布在此处

---

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

如果您看不到它，那么问题必须是容器