如何使用透明度繪製PNG圖像輪廓（邊框）

Question

如何使用透明度繪製PNG圖像輪廓（邊框）。

像我們有這樣的形象：

，我們希望這一個：

我創建通過HTML5圖像陰影，但不能得到我想要的。 我想用HTML5或jquery或兩者來繪製它，如果任何人有其他想法，那麼請告訴我。

<img id="scream" src="images/apple/Tool.png" alt="The Scream" style="display:none"> 
<p>Canvas:</p> 
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 
<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("scream"); 

    ctx.shadowColor="#000000"; 
    ctx.shadowOffsetX = 0; 
    ctx.shadowOffsetY = 0; 
    ctx.shadowBlur = 15; 
    ctx.drawImage(img, 25, 25); 
</script> 

Answer 1

我覺得this問題是非常有用的 也許這代碼

<div id="fadeMe"> 
    <img src="transparent.png" alt="" /> 
</div> 

另一種方式來解決這個問題是這樣的簡單的jQuery插件，我使用的，因爲我不能改變結構。我會給予歸屬，但我真的不能記住我發現它的地方。

/* IE PNG fix multiple filters */ 
(function ($) { 
    if (!$) return; 
    $.fn.extend({ 
     fixPNG: function(sizingMethod, forceBG) { 
      if (!($.browser.msie)) return this; 
      var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here 
      sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions) 
      this.each(function() { 
       var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"), 
        imgname = (isImg) ? this.src : this.currentStyle.backgroundImage, 
        src = (isImg) ? imgname : imgname.substring(5,imgname.length-2); 
       this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')"; 
       if (isImg) this.src = emptyimg; 
       else this.style.backgroundImage = "url(" + emptyimg + ")"; 
      }); 
      return this; 
     } 
    }); 
})(jQuery);