将 HTML Canvas 导出为图像

Question

我正在以编程方式创建一个非常简单的 HTML Canvas，我在上面写了一些文本，然后绘制了一个导入的 PNG 图像。我现在想“展平”这个 canvas 并将其作为新图像导出。

它正在工作 - 但不是 100%。
问题是，虽然文本和背景颜色确实显示在新创建和导出的 PNG 中，但导入并绘制在原始 canvas 上的 image 没有显示.

这是我的代码：

        var newCanvas = document.createElement("canvas");
        var context = newCanvas.getContext("2d");

        // 1. Filling Canvas with Background Color:
        context.fillStyle = "blue";
        context.fillRect(0, 0, newCanvas.width, newCanvas.height);

        // 2. Writing Text on the Canvas:
        context.font = "30px Comic Sans MS";
        context.fillStyle = "yellow";
        context.textAlign = "center";
        context.fillText("Hello World", newCanvas.width/2, newCanvas.height/2); 

        // 3. Adding a PNG to the Canvas:
        let bgdImage = new Image();
        bgdImage.src = "images/TilePattern1.png";
        
        bgdImage.onload = function(){
            context.drawImage(bgdImage, 0, 0, bgdImage.width, bgdImage.height);
        }


        // 4. Now I create a NEW Image object and set its contents to be 
        //    all those elements I drew on my Canvas:
        let finalImage = new Image();
        finalImage.src = newCanvas.toDataURL();

因此由此代码创建的结果 finalImage 确实具有背景颜色和我编写的文本 - 但它没有我导入并绘制在 canvas 使用 .drawImage

我需要做什么来解决这个问题？

（注意：导入的“TilePattern1.png”图像确实显示在 网页 [=35] 上绘制的 canvas =]; 但它不会显示在从 Canvas 导出的图像上。）

Answer 1

我猜你遇到了错误情况：

MDN

SecurityError The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.

更新：我现在运行你的代码完整了，第一个问题是你在从 canvas 创建 base64 之前没有等待图像加载，所以它没有里面有图像。第二个问题是，如果您等待图像加载然后尝试创建 base64，您将看到类似这样的错误：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

这是等待图片加载的代码，您可以自己尝试一下：

 <body>
 <img />
 <script>
 var newCanvas = document.createElement("canvas");
        var context = newCanvas.getContext("2d");

        // 1. Filling Canvas with Background Color:
        context.fillStyle = "blue";
        context.fillRect(0, 0, newCanvas.width, newCanvas.height);

        // 2. Writing Text on the Canvas:
        context.font = "30px Comic Sans MS";
        context.fillStyle = "yellow";
        context.textAlign = "center";
        context.fillText("Hello World", newCanvas.width/2, newCanvas.height/2); 

        // 3. Adding a PNG to the Canvas:
        let bgdImage = new Image();
        bgdImage.src = "images/TilePattern1.png";
        
        bgdImage.onload = function(){
            context.drawImage(bgdImage, 0, 0, bgdImage.width, bgdImage.height);



        // 4. Now I create a NEW Image object and set its contents to be 
        //    all those elements I drew on my Canvas:
        let finalImage = new Image();
        finalImage.src = newCanvas.toDataURL();
        // below added so we can see the canvas and the final image (if you comment out the above line)
        document.body.appendChild(finalImage);
        document.body.appendChild(newCanvas);
        }
        </script>
        </body>

将 HTML Canvas 导出为图像

Exporting an HTML Canvas as Image

javascript

html5-canvas