CODEWITHSUNDEEP
javascriptcanvashtml5-canvasfilesaver.js
munna ss
munna ss

Reputation: 294

Image inside canvas not showing when canvas downloaded using filesaver.js

I have a canvas with text and images inside it.When i try to download it using filesaver.js i get the canvas downloaded with text only.The image is not getting included in the downloaded file.The following is my code.How can i download the canvas with all it's contents. I tried searching a lot.Nothing seem to work. I can right click and save the image, everything works fine in that case.But when i use the filesaver library to download file, it's not working.

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

Upvotes: 0

Views: 439

Answers (1)

Darth
Darth

Reputation: 1651

You call saveFile instantly, image just doesn't have time to boot. Try to call saveFile after onload image event:

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>

Upvotes: 1

Related Questions