CODEWITHSUNDEEP
javascripthtmlimagecsshtml5-canvas
theRev
theRev

Reputation: 109

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

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:

Image from dataURL. The motive is to crop a section of this image

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.

Cropped image

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

Upvotes: 1

Views: 733

Answers (2)

theRev
theRev

Reputation: 109

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

Upvotes: 0

mike-schultz
mike-schultz

Reputation: 2364

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.

Upvotes: 1

Related Questions