專注濰坊企業(yè)網(wǎng)站制作、網(wǎng)站SEO推廣、網(wǎng)站搜索排名、小程序開發(fā) ，技術(shù)服務(wù)電話：13562611499
發(fā)布時間：2017/7/30 15:06:41 關(guān)注：2133
不少客戶反饋，很多軟件采集手機號碼郵箱等，我怎么才能做到真正需要的人能聯(lián)系到我，不想管人員不能看到我的聯(lián)系方式呢，如何才能做到宣傳的同時，信息實現(xiàn)在搜索引擎隱藏不被過度使用。
想到實現(xiàn)這種問題我們可以采用聯(lián)系電話、郵箱等采取生成圖片的方式，當(dāng)然也可以采用直接把聯(lián)系方式直接做到圖片上，相比較而言程序生成的聯(lián)系方式更具備靈活性。
我們今天主要討論采用HTML5 canvas繪圖對象來實現(xiàn)該功能，聯(lián)系方式使用JS的unicode加密，直接生成，修改聯(lián)系方式更簡單。
<!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>
地址：山東省濰坊奎文區(qū)新華路樂川街華誼大廈三樓
網(wǎng)址：http://www.iflybee.cn/ 垂詢電話:
網(wǎng)站備案：魯ICP備14027302號-5
copyright© 濰坊華邦網(wǎng)絡(luò)有限公司2011-2025