发布时间:2017/7/30 15:06:41 关注:2295
不少客户反馈,很多软件采集手机号码邮箱等,我怎么才能做到真正需要的人能联系到我,不想管人员不能看到我的联系方式呢,如何才能做到宣传的同时,信息实现在搜索引擎隐藏不被过度使用。
想到实现这种问题我们可以采用联系电话、邮箱等采取生成图片的方式,当然也可以采用直接把联系方式直接做到图片上,相比较而言程序生成的联系方式更具备灵活性。
我们今天主要讨论采用HTML5 canvas绘图对象来实现该功能,联系方式使用JS的unicode加密,直接生成,修改联系方式更简单。
<!DOCTYPE html>
<html>
<header>
<script type="text/javascript" src="http://www.qmsxw.com/js/jquery-1.12.0.min.js"></script>
</header>
<style>
.box>img{width: 100%;height: 100%;}
</style>
<body>
<div class="box" style="border: 1px solid red;width: 500px;height: 200px;"></div>
<canvas id="myCanvas" width="300" height="150" 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");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("\u0031\u0033\u0035\u0036\u0032\u0036\u0031\u0031\u0034\u0039\u0039",10,90);
ctx.fillText("hahahahaha",10,120);
var img = convertCanvasToImage(c);
$('.box').append(img);
console.log(img);
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
</script>
</body>
</html>
地址:山东省潍坊奎文区新华路乐川街华谊大厦三楼
网址:http://www.wf168.com/ 垂询电话:
网站备案:鲁ICP备14027302号-5
copyright© 潍坊华邦网络有限公司2011-2026