HTML5/Javascript - Stretch圖像源

嗨我從網絡攝像頭獲取圖像，並將它保存在畫布上，我想要做的是將它拉伸x和y cooridnates保持相同的img尺寸，我的意思是，這是原來的攝像頭畫面：HTML5/Javascript - Stretch圖像源

enter image description here

，這是我想怎麼它是拉伸時：

enter image description here

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

這是表示源圖像，以html <img>元件的一段代碼，所以我要舒展源圖像之前顯示在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; 
    } 

}

，關於如何通過x和y以拉伸canvas.toDataUrL()源的任何想法座標並將其返回到src <img>元素？

真正的問題是IMO如何拉伸圖像而不改變寬度和高度（如經由上面的例子的照片示出），這是可能的？

來源

2013-12-12 sbaaaang

只是猜測 'ctx.scale（5,2）;' ？ – Gotschi

@Gotschi試了看起來不錯的主意，但這改變了IMG的寬度和高度，我的意思是我必須留下相同的寬度和高度......你可以在我附上的照片中看到 – sbaaaang

您可以在context.drawImage上使用允許縮放/定位的擴展屬性。

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

來源

2013-12-12 17:11:48 markE

HTML5/Javascript - Stretch圖像源

回答

相關問題