使用 filesaver.js 下载画布时，画布内的图像未显示答案

【问题标题】：Image inside canvas not showing when canvas downloaded using filesaver.js使用 filesaver.js 下载画布时，画布内的图像未显示
【发布时间】：2020-11-17 22:42:59
【问题描述】：

我有一个带有文本和图像的画布。当我尝试使用 filesaver.js 下载它时，我只下载了带有文本的画布。图像未包含在下载的文件中。以下是我的代码。我如何下载包含所有内容的画布。我尝试了很多搜索。似乎没有任何效果。我可以右键单击并保存图像，在这种情况下一切正常。但是当我使用文件保护程序库下载文件时，它不起作用。

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
 <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.js" integrity="sha512-Y36f1QBUtewxhuL8VzWzj6xgtHm4CTgYSdvW21mA6YZBduo6VjvGj79BKUhTqDU4xI9NpVMvCvOxByTsKlh1iQ==" crossorigin="anonymous"></script>

</head>
<body>
<canvas id="cv"></canvas>
</body>
</html>
<script>

function createImage(){

var canvas = document.getElementById('cv');
canvas.width = 750;
canvas.height = 450;
var context = canvas.getContext('2d')

context.fillStyle = "black";
context.font = "28px Arial";
context.fillText("Pass ",350,80);
context.fillText("Name :" ,10,145);
context.fillText("Organization : ",10,190);
context.fillText("Has undergone Training on : 11/6/2020 ",10,235);
context.fillText("This  pass is valid until : 11/9/2020",10,285);
context.font = " 15px Arial";
context.fillText(" Pass Number : SP/01",12,400);

var background = new Image();

background.src = "./images/logo.png";
background.onload = function(){
    context.drawImage(background,165,105);
    alert(loaded);   
}
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width,canvas.height);//for white background
context.globalCompositeOperation = "source-over";
context.lineWidth = 2;
//context.strokeStyle="#000000";
context.strokeRect(0, 0, canvas.width, canvas.height);//for white background

}


function saveFile(){
    var canvas = document.getElementById("cv");
    canvas.toBlob(function(blob) {
    saveAs(blob, "image.png");
});
}

createImage()

saveFile();


</script>

【问题讨论】：

标签： javascript canvas html5-canvas filesaver.js

【解决方案1】：

您立即调用 saveFile，图像只是没有时间启动。尝试在 onload image 事件后调用 saveFile：

function saveFile(){
  var canvas = document.getElementById("cv");
  canvas.toBlob(function(blob) {
      console.log('saved');
      saveAs(blob, "image.png");
  });
}


function createImage() {    
    var canvas = document.getElementById('cv');
    canvas.width = 750;
    canvas.height = 450;
    var context = canvas.getContext('2d')
    
    context.fillStyle = "black";
    context.font = "28px Arial";
    context.fillText("Pass ",350,80);
    context.fillText("Name :" ,10,145);
    context.fillText("Organization : ",10,190);
    context.fillText("Has undergone Training on : 11/6/2020 ",10,235);
    context.fillText("This  pass is valid until : 11/9/2020",10,285);
    context.font = " 15px Arial";
    context.fillText(" Pass Number : SP/01",12,400);
    
    var background = new Image();
    background.src = "https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
    background.onload = function(){
        context.drawImage(background,165,105);
        console.log('loaded');
        saveFile();
    }
    context.globalCompositeOperation = "destination-over";
    context.fillStyle = "#ffffff";
    context.fillRect(0,0,canvas.width,canvas.height);//for white background
    context.globalCompositeOperation = "source-over";
    context.lineWidth = 2;
    //context.strokeStyle="#000000";
    context.strokeRect(0, 0, canvas.width, canvas.height);//for white background    
}
    
    
createImage();

<!DOCTYPE html>
    <html>
    <head>
    <title>HTML5 Canvas Demo</title>
     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.js" integrity="sha512-Y36f1QBUtewxhuL8VzWzj6xgtHm4CTgYSdvW21mA6YZBduo6VjvGj79BKUhTqDU4xI9NpVMvCvOxByTsKlh1iQ==" crossorigin="anonymous"></script>
    
  </head>
  <body>
      <canvas id="cv"></canvas>
  </body>
</html>

【讨论】：

@munnass 它到底是怎么不工作的？我在我的本地主机上签到 - 一切都很好。在 sn-p 中，我们收到错误“可能无法导出受污染的画布。”因为我使用来自另一个域的图像。在同一个域中一切正常
您建议的代码将不起作用。加载页面时不会使用filesaver js下载图像。您可以右键单击并下载该文件。
@munnass 但它对我有用——我得到了带有背景图像和文字的图片。您在控制台中看到哪些错误？可能是您的图像无法加载？或者你遇到了像这里一样的问题 - 跨域图像？
您在控制台中看到“已加载”吗？
感谢您的回复。它现在正在工作..感谢您的帮助..