Ad

(Closed) How Can I Download Canvas As Png?

- 1 answer

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>

Ad

Answer

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

Ad
source: stackoverflow.com
Ad