This method also uses "</convas/>" and allows you to convert images to .png, .webp, and .jpeg. However, I would like to know an alternative method for working with 2D graphics, thanks.
<input id="myInput" type="file"></input>
<button onclick="myCanvas()">Convetr to png</button>
<a id="save">Download</a>
<br>
<img id="sorseImg" src="">
<br>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var img = document.getElementById("sorseImg");
var ctx = canvas.getContext("2d");
var dat = "";
////////////////////////Uploader files//////////////////////////
document.getElementById("myInput").onchange = function exp(evt){
var reader = new FileReader();
reader.onload = function(evt){
dat = evt.target.result;
img.src = dat; //!Warning creates offline content in base64!
};
reader.readAsDataURL(event.target.files[0]);
};
/////////////////////////////////////////////////////////////////
//////////////////////////////Canvas/////////////////////////////
function myCanvas() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
mySave();
}
/////////////////////////////////////////////////////////////////
//////////////////////////////Save///////////////////////////////
function mySave() {
var link = document.getElementById("save");
link.download = "MintyPaper.png";
//toDataURL("image/jpeg", 1.0) quality max=1 min=0; or ("image/webp");
link.href = canvas.toDataURL("image/png");
}
/////////////////////////////////////////////////////////////////
</script>