javascript帆布延伸我的形象

$.fn.imageCanvas = function() { 

    if (!document.getElementById('bgCanvas')){ 
     $('body').append($('<canvas>',{id:'bgCanvas', width:'500px', height: '500px'})) 
     var canvas = document.getElementById('bgCanvas'); 
     var ctx = canvas.getContext('2d'); 
    } 
    var img = new Image(); 
    img.onload = function() { 
     ctx.drawImage(img,0,0,438,300); 
     console.log(this.width); 
     console.log(this.height); 
    } 
    img.src= 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
}

在ctx.drawImage我寫了x，y，寬度，高度。但畫布拉伸此圖像。我怎麼能與原來的寬/高圖像javascript帆布延伸我的形象

來源

2012-11-06 EarthUser

1）'width'和'height'不佔用一個單位。他們應該是'500'。 2）如果你也通過CSS應用寬度/高度，他們可以傾斜畫布圖。這應該避免。 – Shmiddty

如果你只是想顯示圖像，而不縮放，使用的drawImage的three-argument variant只有x和y：

ctx.drawImage(img,0,0);

如果你要裁剪的底部和你的指定大小右邊緣，使用nine-argument variant：

ctx.drawImage(img,0,0,362,240,0,0,362,240);

前四個號碼設定剪裁矩形的x/y和寬度/高度，和接下來的四個數字設定的x/y和寬度/ HEIG剪切到畫布上的剪切圖像矩形的高度。

編輯：

的問題是，jQuery函數對待在選項width和height屬性在第二個參數爲CSS屬性，不作爲DOM對象屬性對象。如果您檢查生成HTML，你會發現：

<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas>

，而不是你想要的，這應該是：

<canvas id="bgCanvas" width="500" height="500"></canvas>

了有關該問題的討論，請參見this question。作爲一個解決方案，我建議使用來代替：

$('body').append($('<canvas>',{id:"bgCanvas"}).attr({'width':500,'height':500}))

來源

2012-11-06 16:44:21 apsillers

雖然這樣做，但Canvas再次渲染圖像...... :( – EarthUser

簡單的三參數版本是否也可以擴展您的圖像？絕對不應該這樣做，如果確實如此，您的canvas可能會出現CSS問題。沒有應用影響CSS寬度或畫布高度的樣式 – apsillers

http://s12.postimage.org/5u4h0irn1/image.png – EarthUser

嘗試使用這個庫我最近創建了可以加載圖像，調整其大小固定的寬度&高度或百分數的和或爲base64或BLOB轉換。

https://github.com/vnbenny/canvawork.js

希望這可以幫助你！

來源

2016-11-03 11:27:54

javascript帆布延伸我的形象

回答

相關問題