div中的图像 - 褪色的边缘

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。