div-faded edges内の画像

Question

Javascriptで変更された画像があり、その画像が背景画像の上に置かれていますが、サイトで見ると、置いた。 イメージのエッジをフェードアウトさせ、背景を取り込んで見えるようにする方法があるかどうかを知りたかったのです。 サイドノート。私はまた、この時点でJQueryを避けたいと考えています。可能であれば、これを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

可能性があり、最も近い境界までの距離に応じて、そのアルファチャンネルの値を設定します。http://imgur.com/a/vC9VV

Javascriptコードを結果を<canvas>にレンダリングします。 簡単ではあるが一般的ではない方法については、thisをご覧ください。