CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvas
panthro
panthro

Reputation: 24099

Image on Canvas is drawn larger than original size

On load of my image I:

var img = new Image();
img.src = e.target.result;
var canvas = $('#test-canvas')[0];
$('#test-canvas').width(img.width);
$('#test-canvas').height(img.height);
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);

But the image is drawn larger than it's original size? I've tried a few images, same problem.

What's the fix?

Upvotes: 1

Views: 3217

Answers (3)

Kyaw Zin
Kyaw Zin

Reputation: 3

/** with vue3 -(to fix drawing canvas image is larger than actual image size **/
const captureImage = () => {
  let width = video.value.getBoundingClientRect().width;
  let height = video.value.getBoundingClientRect().height;
  let context = canvas.value.getContext('2d')
  canvas.value.width = width
  canvas.value.height = height
  context.drawImage(video.value, 0, 0, width, height)
}

Upvotes: 0

ericjbasti
ericjbasti

Reputation: 2075

jQuery will resize the element through CSS, which won't actually change the canvas internal height and width. This will resize the actual canvas element.

var canvas = document.GetElementById('test-canvas');
canvas.width  = img.width;
canvas.height = img.height;

jsFiddle (http://jsfiddle.net/L0drfwgL/) just show it drawing it to scale, and resizing the canvas item itself.

Upvotes: 3

Blloyd
Blloyd

Reputation: 11

It looks like you are pulling the image from an image element on load. You can use the src from the image element rather than recreating an image object and then get the image width/height from the element to draw the image to canvas. 

<script>
    $(document).ready(function(){
        $('#testImg').on('load',function(){
            var image = document.getElementById('testImg');
            var canvas = document.getElementById('test-canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx=canvas.getContext("2d");
            ctx.drawImage(image,0,0);
        })
    });

    </script>

Upvotes: 1

Related Questions