2015-10-12 61 views
2

所以我有一個動態生成世界地圖的裁剪部分的功能。地圖上繪製了各種點,按經度和緯度繪製,具體取決於從腳本中其他地方傳入函數的數據。 (不要擔心這些值是如何計算的,只要接受它們就可以計算出我在代碼中放置[數字]的位置)。我已經制定了如何動態裁剪我的地圖,但是我注意到,在裁剪之後圖像右側有很多透明空白,當圖像被附加到頁面上的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明確設置,因爲裁剪的地圖在大小上會有所不同,具體取決於數據。

+0

附上什麼事的圖像。 – lilezek

+0

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

+0

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

回答

2

嘗試使用:

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'); 
+0

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