时间戳

首页 > 解决方案 > 将 HTML 画布导出为图像

javascript - 将 HTML 画布导出为图像

问题描述

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

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

这是我的代码：

        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，此代码创建的结果确实具有背景颜色和我编写的文本 - 但它没有我导入并在画布上绘制的“TilePattern1.png”图像.drawImage

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

（注意：导入的“TilePattern1.png”图像确实显示在网页上绘制的画布中；但它不会显示在从画布导出的图像中。）

标签： javascripthtml5-canvas

解决方案

我的猜测是你有一个错误情况：

MDN

SecurityError 画布的位图不是原点干净的；至少它的某些内容已经或可能已经从一个站点加载，而不是从加载文档本身的站点加载。

更新：我现在已经完全运行了您的代码，第一个问题是在从画布创建 base64 之前您没有等待加载图像，因此它没有图像。第二个问题是，如果您等待图像加载，然后尝试创建 base64，您将看到类似以下错误：

未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

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

 <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>

推荐阅读