如何在裁剪HTML5 Canvas/JavaScript後從圖像中刪除透明空白？

所以我有一個動態生成世界地圖的裁剪部分的功能。地圖上繪製了各種點，按經度和緯度繪製，具體取決於從腳本中其他地方傳入函數的數據。（不要擔心這些值是如何計算的，只要接受它們就可以計算出我在代碼中放置[數字]的位置）。我已經制定了如何動態裁剪我的地圖，但是我注意到，在裁剪之後圖像右側有很多透明空白，當圖像被附加到頁面上的div時。我如何刪除這個空白？如何在裁剪HTML5 Canvas/JavaScript後從圖像中刪除透明空白？

請注意，每種作物的大小不同。設置溢出：包含div的隱藏屬性並將包含的div限制爲精確的像素寬度將無法達到我想要的效果。

THXü - Gaweyne

createZoomedMapImage: function(imageURL){ 
    var imageObj = new Image(); 

    imageObj.onload = _.bind(function(){ 
    var canvas = document.createElement("canvas"), 
     context = canvas.getContext("2d"), 
     $canvas = $(canvas), 
     w = imageObj.width, 
     h = imageObj.height; 
    canvas.width = w; 
    canvas.height = h; 

    var startingX = [number] 
    var starting Y = [number] 
    var deltaWidth = [number] 
    deltaHeight = [number] 
    context.drawImage(imageObj, startingX, startingY, deltaWidth, deltaHeight, 0, 0, (deltaWidth*2), (deltaHeight*2)); 
    var zoomedImage = canvas.toDataURL('image/png'); 

    }, this); 
    imageObj.src = imageURL; 
}

jsfiddle.net/Gaweyne/r0t3hoo6

圖像標記看起來像什麼顯示在結果中。我有一個300 x 600像素的圖像。但實際的圖形只佔用300 x 300像素。我不希望圖形佔據整個圖像的寬度。我想要圖像爲300 x 300像素。我不想用CSS明確設置，因爲裁剪的地圖在大小上會有所不同，具體取決於數據。

來源

2015-10-12 Gaweyne

附上什麼事的圖像。 – lilezek

我不能。爲了安全起見，我在脫機機器上開發。爲了澄清： 1）我用drawImage函數剪裁圖像 2）我創建一個帶有上面代碼中生成的URL的src屬性的img標籤3）我將它附加到div 4）出現圖像，但圖像標籤內的圖像右側顯示透明空白。 – Gaweyne

即使您在本地機器中離線開發，您也應該可以上傳圖像，甚至可以表示問題所在。我們不會花更多時間幫助你，你試圖解釋這個問題。 – lilezek

嘗試使用：

canvas.width = deltaWidth; 
canvas.height = deltaHeight; 
context.drawImage(imageObj, startingX, startingY, deltaWidth, deltaHeight, 0, 0, (deltaWidth*2), (deltaHeight*2)); 
var zoomedImage = canvas.toDataURL('image/png');

來源

2015-10-12 14:10:54 lilezek

發現在我們聊天時阻止這項工作的錯誤。這工作完美。非常感謝。 * tips fedora * – Gaweyne

如何在裁剪HTML5 Canvas/JavaScript後從圖像中刪除透明空白？

回答

相關問題