☰
登录网站
潍坊华邦网络 2017-07-30 15:06:41 2.4K 0
游戏编码：GM393100088 最后修订时间：2017-07-30 15:06:41
无附件
不少客户反馈，很多软件采集手机号码邮箱等，我怎么才能做到真正需要的人能联系到我，不想管人员不能看到我的联系方式呢，如何才能做到宣传的同时，信息实现在搜索引擎隐藏不被过度使用。
想到实现这种问题我们可以采用联系电话、邮箱等采取生成图片的方式，当然也可以采用直接把联系方式直接做到图片上，相比较而言程序生成的联系方式更具备灵活性。
我们今天主要讨论采用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>