79294716

Date: 2024-12-19 15:08:05
Score: 1.5
Natty:
Report link

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>
Reasons:
  • Blacklisted phrase (0.5): thanks
  • Blacklisted phrase (1.5): I would like to know
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: cody toy