CODEWITHSUNDEEP
javascripthtmlcanvas
Sushant Tayade
Sushant Tayade

Reputation: 132

Canvas drawimage() draws zoomed image

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.

Upvotes: 1

Views: 6735

Answers (4)

Tayn&#227; Davantel Costa
Tayn&#227; Davantel Costa

Reputation: 109

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;

Upvotes: 5

asins
asins

Reputation: 11

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();

}

Upvotes: 0

Kevin Kloet
Kevin Kloet

Reputation: 1086

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

Upvotes: 1

wiredolphin
wiredolphin

Reputation: 1641

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.

Upvotes: 0

Related Questions