html：
<div class="posterDiv" id="posterBody">
<img class="top hidden" id="topImg" src="/h5demo-green/image/activity/top_.jpg" alt="">
<img class="erweima hidden" id="erweimaImg" src="" alt="">
<img class="bottom hidden" id="bottomImg" src="/h5demo-green/image/activity/bottom_.jpg" alt="">
<div id="canvas1" style="width: 140px;height: 140px;display: none"></div>
<canvas id="myCanvas" class="myCanvas"></canvas>
<img src="" alt="" id="save_img">
<div class="down">長按轉發(fā)或保存<a class="downBt hidden"?></a></div>
</div>
<script src="/js/zepto.min.js"></script>
<script src="/js/qrcode.min.js"></script>
<script src="/js/poster.js"></script>
++++++++++++++++++++++++++++
重點來了。poster.js代碼如下
先解釋一下思路，
第一步：先調用qrcode.min.js，把掃碼二維碼需要跳轉的鏈接（如我的代碼中的‘http://www.baidu.com’），生成一個二維碼，把二維碼轉成canvas格式（如我的代碼中的canvas1）。
第二步：把這個canvas1轉成img圖片
第三步：把這個img重新畫在一個新的canvas上，（如我的代碼中的myCanvas）
第四步：把這個myCanvas轉成img圖片，大功告成?。。?/p>
此時生成的圖片，是帶有二維碼的圖片，在微信中，包括服務號，包括聊天窗口，都可以長按保存到本地相冊，都可以長按識別二維碼，都可以長按分享到微信朋友或者微信聊天群！！！！
window.onpageshow = function()?{??
??????? var url='http://www.baidu.com';???????//掃碼二維碼跳轉的鏈接
???????? makeCode(url,function ()?{
??????????????????? createErWei(function ()?{
??????????????????????? createCanvas(‘小明’,‘001’);
????????????????????})
????????????????});??
};
function makeCode (erweiUrl,callback)?{
??? var qrcode = new QRCode('canvas1',?{
??????? width: 200,
??????? height:200,
????});
??? qrcode.makeCode(erweiUrl);
??? if(callback){
??????? window.setTimeout(function ()?{
??????????? callback();
????????},500);
????}
}
function createErWei(callback)?{
??? var can1=GLOBAL_G.getId('canvas1').getElementsByTagName('img')[0].src;
??? GLOBAL_G.getId('erweimaImg').src=can1;
??? if(callback){
??????? window.setTimeout(function ()?{
??????????? callback();
????????},200);
????}
}
function createCanvas(name,adminId){
??? var deviceWidth = document.documentElement.clientWidth;
??? var stageScale=deviceWidth/750;???
??? var c=document.getElementById("myCanvas");
??? c.width = 670*stageScale;
??? c.height = 1086*stageScale;
??? c.style.display='none';
??????????? var ctx=c.getContext("2d");
??????????? var img = GLOBAL_G.getId('topImg'),
??????????? imgW=img.width*stageScale,
??????????? imgH =img.height*stageScale;
??????????? ctx.drawImage(img,0,0,imgW,imgH);
??????????? var img3 = GLOBAL_G.getId('bottomImg'),
??????????? imgW3=img3.width*stageScale,
??????????? imgH3=img3.height*stageScale;
??????????? ctx.drawImage(img3,0,imgH,imgW3,imgH3);
??????????? var img2=GLOBAL_G.getId('erweimaImg');
??????????? img2.width=200*stageScale;
??????????? img2.height=200*stageScale;
??????????? var imgW2=img2.width,
??????????? imgH2 =img2.height;
????????ctx.drawImage(img2,10,imgH+10,imgW2,imgH2);
??????????? ctx.fillStyle="#000";
??????????? ctx.font="16px Arial";
??????????? var x1=234*stageScale,y1=(762+38)*stageScale;
???????????? tempSrc = c.toDataURL();
??????????? var newImg = document.getElementById("save_img");
??????????? newImg.src=tempSrc;
}
