HTML5/ Javascript - Stretch image source

Question

Hi I'm getting image from webcam and I save it on canvas, what I want to do is to stretch it by x and y cooridnates keeping same img dimensions, what I mean is, this is the original webcam picture:

enter image description here

and this is how I wanna it to be when stretched:

enter image description here

<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas>

this is the piece of code that shows source image to <img> element in html , so I have to stretch source image before to show it in html

function snap() {

    if (localMediaStream) {

        ctx.drawImage(video, 0, 0);

        var oImg=document.createElement("img");
        oImg.setAttribute('src', canvas.toDataURL());
        oImg.setAttribute('alt', 'na');
        oImg.setAttribute('width', '1300');
        oImg.setAttribute('height', '1300');
        var img = document.body.appendChild(oImg);
        return img; 
    }

}

any idea on how to stretch the canvas.toDataUrL() source by x and y coordinates and return it stretched to the the src <img> element?

The real problem imo is how to stretch image without altering width and height (as shown via example photos above), is this possible?

@Gotschi tryed it seems not bad idea but this changes img width and height , i mean i have to leave same width and height ... as you can see in the photos i attached — Filippo oretti
– Filippo oretti, Commented Dec 12, 2013 at 10:26

markE · Accepted Answer · 2013-12-12 17:11:48Z

1

You can use the extended properties on context.drawImage that allow scaling/positioning.

enter image description here

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=function(){
    var w=img.width;
    var h=img.height;
    canvas.width=w;       // set the canvas size to the original image size
    canvas.height=h;
    ctx.drawImage(img,
        0,0,w,h,         // start with the image at original size
        -w/4,0,w*1.25,h  // widen the original image by 1.25X 
                         // and start drawing 1/4th off the left edge of the canvas
    );
}
img.src="temp18.png";

answered Dec 12, 2013 at 17:11

markE

106k11 gold badges174 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML5/ Javascript - Stretch image source

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related