分隔邊緣內的圖像

Question

我有一個通過Javascript更改過的圖像，該圖像位於背景圖像的頂部，但是當我在網站上查看圖像時，您可以看到圖像爲放置。 我想知道是否有方法淡化圖像邊緣並讓背景進入，使其看起來很像。 旁註。我也希望在這個時候避免使用JQuery，如果可能的話，我想通過javascript來實現這一點。

在這裏你可以看到網站頁面：http://imgur.com/a/vC9VV

Javascript代碼：

// attempting to move the images only 
var y = document.getElementById("pic2"); 
// Sorted by pathing the image to the folder (can use .. to get in the folder) 
y.setAttribute("src", "../images/water_image1.png"); 
y.style.cssFloat = 'right'; 
// change the images to the same size as the replacing pic 
y.style.width = "400px"; 
y.style.height = "250px"; 
// This is sorting out the alignment with the text 
y.style.margin = "110px 20px 10px"; 
y.style.opacity = "0.8"; 

Answer 1

您可以通過圖像的每個像素循環，並設置爲根據距離最接近邊境的alpha通道的值圖像，然後在<canvas>上渲染結果。 爲了更簡單但不太通用的方法，請看this。