CODEWITHSUNDEEP
jqueryhtmlhtml5-canvas
Reece
Reece

Reputation: 2711

How do I Draw Images to a Canvas and Size Them Properly?

I am having trouble getting my canvas draw img to size and look exactly like the actual img element. Every time I try give it a size it just seems to get cropped. How can I make it so that I get the img element size within jQuery and then use it on my canvas element to make an exact copy?

Here's some demo code;

jQuery(document).ready(function($) {
	var img = $('.image');
	var canvas = $('.img_canvas');
	canvas.height( img.height() );
	canvas.width( img.width() );

	var context = canvas[0].getContext('2d');
	context.drawImage(img[0], 0, 0);
});
body{
    margin: 0;
}

img{
    width: 100%;
    height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img  src="https://alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" class="image">

<canvas class="img_canvas">
our browser does not support the HTML5 Canvas, please consider updating or changing your browser for a better experience.
</canvas>

Upvotes: 0

Views: 278

Answers (2)

Professor Abronsius
Professor Abronsius

Reputation: 33813

It's not jQuery but you ought to get the idea. Create an image using new Image() and then, in the load event call the drawImage method whilst setting height and width attributes to the canvas from the loaded image.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            img.image{
                border:2px solid blue
            }
            canvas{
                border:2px solid red;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function(){
                let canvas=document.querySelector('canvas');
                let ctxt=canvas.getContext('2d');

                let oImg=new Image();
                    oImg.onload=function(){
                        canvas.width = oImg.width;
                        canvas.height = oImg.height;
                        ctxt.drawImage( oImg, 0, 0, canvas.width, canvas.height );
                    }

                oImg.src=document.querySelector('img.image').src;
            })
        </script>
    </head>
    <body>
        <img class='image' src="https://picsum.photos/seed/picsum/400/300" />
        <canvas>
            This Web-Browser does not support the "HTML5 Canvas", please consider 
            updating or changing your browser for a better experience.
        </canvas>
    </body>
</html>


document.addEventListener('DOMContentLoaded', function(){
  let canvas=document.querySelector('canvas');
  let ctxt=canvas.getContext('2d');

  let oImg=new Image();
    oImg.onload=function(){
      canvas.width = oImg.width;
      canvas.height = oImg.height;
      ctxt.drawImage( oImg, 0, 0, canvas.width, canvas.height );
    }

  oImg.src=document.querySelector('img.image').src;
})
img.image{
  border:2px solid blue
}
canvas{
  border:2px solid red;
}
<img class='image' src="//alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" />
<canvas>
  This Web-Browser does not support the "HTML5 Canvas", please consider 
  updating or changing your browser for a better experience.
</canvas>

Upvotes: 0

Ti Hausmann
Ti Hausmann

Reputation: 974

there are a few tripwires.

  • The jQuery functions img.width() and img.height() will give you the image size inside the DOM, not the actual image file resolution. For this, there is naturalWidth and naturalHeight.
  • Similary, the jQuery functions canvas.height(320) and canvas.width(240) will set CSS width and height, not the canvas resolution. What you want is to directly set the width and height attributes of the canvas dom element (not the jQuery node). Imagine: You could have a canvas with a pixel resolution of 320x240 but want it to be fullscreen via css.
  • drawImage with three arguments will always draw the image in its natural resolution. You can pass in more arguments to resize the image.

So the actual "problem" was the canvas sizing based on the dom size of the image. Hope that helps!

jQuery(document).ready(function($) {
	var img = $('.image');

    var canvas = $('.img_canvas');
    canvas[0].height = img[0].naturalHeight;
    canvas[0].width = img[0].naturalWidth;

    var context = canvas[0].getContext('2d');
    context.drawImage(img[0], 0, 0);    	
});
body{
    margin: 0;
}

img{
    width: 100%;
    height: auto;
}
canvas {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
image:
<img  src="https://alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" class="image">
canvas:
<canvas class="img_canvas">
our browser does not support the HTML5 Canvas, please consider updating or changing your browser for a better experience.
</canvas>

Upvotes: 2

Related Questions