分隔边缘内的图像

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。