gpt4 book ai didi

jquery - 如何绘制具有透明度的png图像轮廓(边框)

转载 作者:行者123 更新时间:2023-11-28 13:18:33 27 4
gpt4 key购买 nike

如何绘制具有透明度的png图像轮廓(边框)。

就像我们有这张图片:enter image description here

我们想要这个:enter image description here

我正在通过 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>

最佳答案

我认为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);

关于jquery - 如何绘制具有透明度的png图像轮廓(边框),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14833544/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com