PHP实现图片中添加文字并用背景图片作为文字的颜色

fangjinzhen 发布于 2018/09/04 12:12
阅读 1K+
收藏 0

在一个图片上面添加一个粗体的文字,文字的颜色透明,然后将文字以外的区域全部变成透明,只保留文字所在下面区域的背景图片。这个要怎么实现,完全没有头绪

加载中
2
栍椧
栍椧

背景图a、白底黑字文字图b、透明图c。

若 b==黑 ,则 c=a

1
tcxu
tcxu

这个效果是否正和你意?文字颜色透明一半(0.5),文字以外的区域全部变成透明,即显示全部背景。

<html>
<head>
<style>
#content{
	z-index:2;
	width:600px;
	height:400px;
	position:absolute;
	left:0px;
	top:0px;
}
#back{
	width:600px;
	z-index:1;
}
</style>
</head>
<body>
<canvas id="content"> </canvas>
<img id="back" src="http://img.popoho.com/UploadPic/2008-2/20082772159593.gif">
</body>
<script>
g=document.getElementById("content").getContext('2d');
g.fillStyle= "rgba(255,0,0,0.5)"
g.font="40px Arial Black";
g.fillText("Hello,", 10, 50);
g.fillStyle= "rgba(100,255,255,0.5)"
g.fillText("fangjinzhen.", 10, 100);
</script>
</html>

 

1
jsparrow
jsparrow

应该不是楼上的处理方式,我没有具体做过,但是我觉得思路是这样的,把文字转成图片,然后文字的图片像素与背景的图片做 & 操作,这样,背影图片就只剩下文字部分的像素,然后再把背影图片做半透明的处理,最终应该就是楼主需要的效果了。

0
fangjinzhen
fangjinzhen

引用来自“金留庆”的评论

背景图a、白底黑字文字图b、透明图c。

若 b==黑 ,则 c=a

谢谢,用这个方法实现了

返回顶部
顶部