Canvas drawimage() draws zoomed image

1
votes

I have Monitor with resolution 1920 * 1080.

I am trying this very basic canvas drawimage() code on my PC.

<!DOCTYPE html>
<html>
    <body>

        <p>Image to use:</p>

        <img id="scream" width="220" height="277" 
        src="test.jpg" alt="The Scream">

        <p>Canvas:</p>

        <canvas id="myCanvas" width="240" height="297"
        style="border:1px solid #d3d3d3;">
           Your browser does not support the HTML5 canvas tag.
        </canvas>

        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
                var img = document.getElementById("scream");
                ctx.drawImage(img, 10, 10);
           };
        </script>

    </body>
</html>

So I am getting output like this: enter image description here

Actually output should be same as original image, but it's not.

After going through similar questions on stackoverflow and http://developer.mozilla.org, I understood that it has something to do with height and width.

How to use drawimage() properly for any screen size or device?

Edit: The test image dimensions are 3024 * 4032

I am trying to implement crop and save functionality using following plugin : http://odyniec.net/projects/imgareaselect/

So whatever height and width coordinates will be returned from there, I will crop that image from original and will draw on canvas.

Therefore the cropped image must be with actual resolution but displayed in smaller preview container.

4
javascripthtmlcanvas
Your source "image to use" is a much higher resolution than is displayed in the img tag, so when you try to draw it in the canvas, you need to specify the height and width you want to resize it to – Alex

4 Answers

2
votes

That's happens because your canvas has 240x297 but the context has 150X300.

I fix this problem make this way.

let canvas = document.createElement("myCanvas");
ctx = canvas.getContext("2d");
ctx.canvas.width = 240;
ctx.canvas.height = 297;
1
votes

Using this syntax: context.drawImage(img,x,y,width,height); you can draw the image with set dimensions.

basically what the parameters do is:

  • img: the image to draw.
  • x: where to start drawing the image on the x axis.
  • y: where to start drawing the image on the y axis.
  • width: the width of the image on the canvas.
  • height: the height of the image on the canvas.

if you want to draw the image on the whole canvas you can use this: 

window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,0,0,240,297);
}
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://i.vimeocdn.com/portrait/58832_300x300" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

source

0
votes

The drawImage method takes also a width and height argument which will be used to draw the image. Try it like so:

ctx.drawImage(img, 10, 10, 220, 277);

using the size of the image.

0
votes

see https://jsfiddle.net/dot8hgwd/1/ ,is zoom it.

function draw_canvas_image() {
var canvas = document.getElementById("image-holder-canvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("myImageToDisplayOnCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

imageObj.onload = function() {

  var imgWidth = imageObj.naturalWidth;
  var screenWidth  = canvas.width;
  var imgHeight = imageObj.naturalHeight;
  var screenHeight = canvas.height;
    var scaleX = screenWidth/imgWidth;
  var scaleY = screenHeight/imgHeight;
  var scale = scaleY;
  if(scaleX < scaleY) scale = scaleX;
    imgHeight = imgHeight*scale;
    imgWidth = imgWidth*scale;          

    let x = y = 0;
  if(imgWidth < screenWidth){
   x = (screenWidth - imgWidth) / 2;
  }else{
    y = (screenHeight - imgHeight) / 2;
  }

console.log('source ->', imageObj.naturalWidth, imageObj.naturalHeight, 'handle ->', imgWidth, imgHeight, "canvas ->", screenWidth, screenHeight);
  context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, x, y, imgWidth, imgHeight);
}
imageObj.src = 'http://7jptuv.com1.z0.glb.clouddn.com/test_cav.png'; // width < height
// imageObj.src = 'http://r1.ykimg.com/050C000059C3103CADC0AE070702536E'; // width > height
}

document.querySelector('#btn').onclick = function(){
console.log(11);
    draw_canvas_image();

}