Как нарисовать контур изображения 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);