Image Reading from base64 data in javascript produces image of different size

Question

I am trying to get a screenshot of a page using chrome extension and trying to crop the image. Upon taking the screenshot, I get a base64 dataUrl of the image.

When I try to render the image using the dataURL, the image renders larger(appears zoomed in) than the original image. When I manually give the <img> object the original size it renders fine. But when I draw this image to a canvas, the canvas takes the enlarged size.

I have been banging my head against the wall to get a solution for this problem but to no avail. Any help is greatly appreciated.

//Here is the JS code:
var image = document.getElementById("image");
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

image.onload = function() {
    var sourceX = 0;
    var sourceY = 0;
    var sourceWidth = 150;
    var sourceHeight = 80;
    var destWidth = sourceWidth;
    var destHeight = sourceHeight;
    var destX = 0;
    var destY = 0;

    context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};

And here is the HTML code, I am removing the dataurl as it takes too much space, and pasting another URL.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <img height = "678" width = "1280" id = "image" src = "http://s12.postimg.org/7r9q3h2vx/ss2.jpg"/>
  <canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

The following is the image(from the dataurl) I want to crop:

The following is the cropped image that I get. It is not the intended image because it appears enlarged(zoomed in). It is the top left section of the original image.

For further reference, here is the jsbin link: https://jsbin.com/pomayowara/edit?output

score 1 · Accepted Answer · answered Feb 29 '16 at 05:18

1

The base64 dataURL provided has information for an image of 2560 × 1356, but you rescaling the image to 1280x678. Your code is obtaining the original size of the image and is therefore being enlarged. You would need to send the canvas the original ratio of the image and not the resized dimensions of the image.

answered Feb 29 '16 at 05:18

mike-schultz

2,354
10
13

I am taking a screenshot of the visible part of the webpage and sending the window.innerWidth and window.innerHeight. I feel 2560x1356 may be because I am using a Macbook Retina Display. Is there a fix for it, because ultimately I want my image to be fitting the screen. – theRev Feb 29 '16 at 05:23
Looking at your jsBin, if you double your sourceWidth and sourceHeight (300, 160) and halve your destWidth and destHeight (150, 80), it will keep the aspect ratio of your source image. If you need to improve the quality of your downsampling, this might help : http://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly – mike-schultz Feb 29 '16 at 05:45
Thanks, this helped !! – theRev Feb 29 '16 at 09:38

score 0 · Answer 2 · answered Feb 29 '16 at 09:51

So, in case someone is facing a similar problem, this is what I did. I was trying to crop the screenshot of a webpage using the coordinates given. As pointed out by @mike-schultz, the problem that I was facing was the image dataUrl was showing the image size to be 2560x1356 where as my browser viewport size was 1280x678. This was producing a zoomed-in image when drawn on canvas.

As per the suggestions of @mike0schultz, I doubled the sourceWidth and sourceHeight. This worked like a charm in showing the correct cropped part of the screenshot. The only problem was it was still blurry, not sharp at all. So I tried doing this:

I doubled the width and height of the canvas through javascript, then resized the canvas using CSS and finally scaled the context to (2,2). This gave me the perfect image as a result.

The code is as follows coords.width and coords.height are the intended dimensions of the image:

var c = document.createElement("canvas");
c.id = "myCanvas";
c.width = coords.width*2;
c.height = coords.height*2;
c.style.width = coords.width+"px";
c.style.height = coords.height+"px";
c.getContext("2d").scale(2,2)
var ctx = c.getContext("2d");
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(image, 
    coords.left*devRes, coords.top*devRes,
    coords.width*devRes, coords.height*devRes,
    0,0,
    coords.width, coords.height);

Image Reading from base64 data in javascript produces image of different size

2 Answers2