(Closed) How can I download canvas as png?

Question

The HTML page I try to do is to upload image to canvas, put a watermark on that image, then download the image with the watermark as one png file. The current problem is I can upload the image to the canvas and put the watermark but I can't download the canvas.

I've already tried some solution on the internet including stackoverflow. Fidesaver.js didn't works for that. so here is the code:(The watermark in the code is just random 240x240 image i found in google)

The project page on Glitch.com seems not work anymore, so I put the code in the code snippet:

Upper image:<br>
<img src="https://micolsalomone.com/wp-content/uploads/2018/04/preloader-logo-240x240.png" width="150px" alt="Example image" id="wm" >
<input type="file" id="imageLoader" name="imageLoader"/><br>
<canvas id="imageCanvas"></canvas>
<script type="text/javascript">
var wm=document.getElementById("wm");
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){ 
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.crossOrigin = '';
        img.onload = function(){
            canvas.width = 240;
            canvas.height = 240;
            ctx.drawImage(img,0,0,240,240);
            ctx.drawImage(wm,0,0,240,240);
            
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]); 
}
</script>

refer here https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image/56185896#56185896 — ifelse.codes, Dec 12 '19 at 09:39
@SumanPatra where should the code insert in? I'm just started to learn Javascript and Canvas. I've already tried multiple ways and none of those worked. They will only create a blank png or just immediately download blank png once the html opened. If you have any ideas you can edit the project here : https://glitch.com/edit/#!/join/1a65c154-7e29-449b-8ba4-d746a6a3120a — andycis, Dec 12 '19 at 09:59

score 0 · Accepted Answer · answered Dec 12 '19 at 09:58

You can try to do this:

var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){ 
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.crossOrigin = '*';
        img.onload = function(){
            canvas.width = 240;
            canvas.height = 240;
            ctx.drawImage(img,0,0,240,240);
            
            
            var wm = new Image();
            
            wm.crossOrigin = '*';
            
            wm.onload = function () {
              ctx.drawImage(this,0,0,240,240);
              
              var base64 = canvas.toDataURL("image/png")
            
              var fileToSave = new Image();
            
              fileToSave.onload = function () {
                document.getElementById('img_div').appendChild(this);
              };
            
              fileToSave.src = base64;
            };
            
            wm.src = 'https://i.imgur.com/YGxjLZw.png';
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]); 
}

<img src="https://micolsalomone.com/wp-content/uploads/2018/04/preloader-logo-240x240.png" width="150px" alt="Example image" id="wm" >
<input type="file" id="imageLoader" name="imageLoader"/><br>
<div>
  Canvas
  <canvas id="imageCanvas"></canvas>
</div>
<div id="img_div">
  Image png:
</div>

Note: I'd changed your water mark image with another image because of Access-Control-Allow-Origin reason. But you can still use it on your localhost.

After applying water mark to the canvas, you need to convert the canvas to image as base64 string.

Then, you can parse the string to Image element. Now you can do everything with that element: download, append, apply to another canvas....

(Closed) How can I download canvas as png?

1 Answers1