Javascript image object does not resize on canvas

Question

I am trying to use this code to resize images and print them on an html canvas to modify them later:

var wth =  img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, 0, 0);

However, this does not change the result on canvas. It still appears to be too large for the canvas.

When I use this code, as suggested in this question the image does not load at all . I don't know if I am using it wrong or something but it just doesn't work.

ctx.drawImage(img, 0, 0, 300, 300 * wth);

This is my code:

 function preview_image(event) { var output = document.getElementById('output_image'); var reader = new FileReader(); var ctx = output.getContext('2d'); //output.src = "/loading.gif"; reader.onload = function() { //output.src = reader.result; var img = new Image(); // Create new img element img.src = reader.result; // Set source path img.onload = function() { var wth = img.clientHeight / img.clientWidth; img.width=300; img.height=300 * wth; ctx.drawImage(img, 0, 0); } } reader.readAsDataURL(event.target.files[0]); }

 body { width:100%; margin:0 auto; padding:0px; font-family:helvetica; background-color:#0B3861; } #wrapper { text-align:center; margin:0 auto; padding:0px; width:995px; margin: auto; } #output_image { margin: auto; max-width:300px; }.editarea{ width: 50%; background: #EC6C67; margin: auto; }

 <,DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>ReturNull Photo Editor</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <input type="file" accept="image/*" onchange="preview_image(event)"><br><br> <div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div> </div> </body> </html>

Answer 1

I changed arguments in ctx.drawImage function:

 function preview_image(event) { var output = document.getElementById('output_image'); var reader = new FileReader(); var ctx = output.getContext('2d'); //output.src = "/loading.gif"; reader.onload = function() { //output.src = reader.result; var img = new Image(); // Create new img element img.src = reader.result; // Set source path img.onload = function() { var wth = img.clientHeight / img.clientWidth; img.width=300; img.height=300 * wth; ctx.drawImage(img, (output.width / 2) - (img.width / 2), 0, img.width, output.height); } } reader.readAsDataURL(event.target.files[0]); }

 body { width:100%; margin:0 auto; padding:0px; font-family:helvetica; background-color:#0B3861; } #wrapper { text-align:center; margin:0 auto; padding:0px; width:995px; margin: auto; } #output_image { margin: auto; max-width:300px; }.editarea{ width: 50%; background: #EC6C67; margin: auto; }

 <,DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>ReturNull Photo Editor</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <input type="file" accept="image/*" onchange="preview_image(event)"><br><br> <div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div> </div> </body> </html>

Javascript image object does not resize on canvas

Question

1 answers

solution1
0 ACCPTED 2020-06-29 15:45:50

Javascript image object does not resize on canvas

Question

1 answers

solution1 0 ACCPTED 2020-06-29 15:45:50

solution1
0 ACCPTED 2020-06-29 15:45:50