Jquery 如何使用透明度绘制png图像轮廓（边框）

如何绘制具有透明度的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>

画布：

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“尖叫”）；
ctx.shadowColor=“#000000”；
ctx.shadowOffsetX=0；
ctx.shadowOffsetY=0；
ctx.shadowBlur=15；
ctx.drawImage（img，25,25）；

我认为这个问题很有用 也许这个代码

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

---

这是一个图像处理问题，您需要的不仅仅是css或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);