微信公众号能正常canvas绘图，但是 toDataURL生成图片链接则报报SecurityError (DOM Exception 18): The operation is insecure....-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
   <meta name="format-detection" content="telephone=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <title> </title>
   <link rel="stylesheet" type="text/css" href="./css/style.css">
</style>
</head>
<body>
   <div class="forfree">
       <div class="top">
           <div class="rule">规则</div>
           <div class="more">
               <div class="click-more"></div>
           </div>
       </div>
       <div class="modal-mask"></div>
       <div class="mask-box rule-con">
           <div class="rule-con">
               <img src="./images/rule-title.png">
               <div class="rule-con-in">
                   活动时间：
               </div>
           </div>
           <img class="close" src="./images/close.png">
       </div>
       <ul class="cardlist"></ul>
       <div class="mask-box copy-con">
           <h3>长按保存图片，与好友共享奖品</h3>
           <canvas id="canvas" width='400' height='420'></canvas>
           <img id="composeImg" style="width:100%;height:auto;" src="">
           <img class="close" src="./images/close.png">
       </div>
       
       <img id="headImg" src="" style="display:none;">
       <img id="qrcode" src="" style="display:none;">
       <img class="bottom-bg" src="images/bottom-bg.jpg">
   </div>
   <div id="loading"></div>
</body>
<script src="../../../js/zepto.min.js"></script>
<script src="../../../js/vconsole.min.js"></script>
<script src="../../../js/utils.js"></script>
<script src="../../../js/simpop.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
var href = window.location.href; //console.log(href);
var shareid = '';
var username = parseParams(href).username;
var headImg = parseParams(href).headImg;
   $('#headImg').prop("src",'http://wx.qlogo.cn/mmopen/vi_32/4vqZjbF8LlNQfAsHlHl5icZiaVNNC3zxu6UK8zYicFNd97L8MXZU3ibIyOPZiasMq05JR0X0XLdDqT2p70kaAwAGB7Q/0');//显示给用户
   //$('#headImg').prop("src",headImg);//显示给用户

$(".more").click(function(){
   window.location.href = 'my.html?username='+username+'&headImg='+headImg;
})
$(".rule").click(function() {
   $(".rule-con").show();
   $(".modal-mask").show();
})
$(".modal-mask , .close").click(function(){
   $(".rule-con").hide();
   $(".modal-mask").hide();
   $(".copy-con").hide();
})

goods();
function goods(res){
   res={
       code:0,
       data:[
           {id: 1, title: "10元电信话费卡", stock: 100, price: 10, img: "http://ovughownb.bkt.clouddn.com/b51ab67ccf1550612ac3a51e51379e97", require_share_cnt:28},
           {id: 2, title: "10元电信话费卡", stock: 100, price: 10, img: "http://ovughownb.bkt.clouddn.com/b51ab67ccf1550612ac3a51e51379e97", require_share_cnt:28}
       ]
   }
   if (res.code == 0) {
       var html = '';
       console.log('--------------------------------------');
       for (var i = 0;i<res.data.length;i++) {
           html += '<li class="card-li" data-id="'+res.data[i].id+'">'
           html +=    '<div class="card-img">'
           html +=           '<img id="pro_img'+res.data[i].id+'" src="'+res.data[i].img+'">'
           html +=       '</div>'
           html +=       '<div class="card-con">'
           html +=           '<h3>'+res.data[i].title+'</h3>'
           html +=           '<p>需'+res.data[i].require_share_cnt+'人共享</p>'
           html +=           '<p><span class="price">￥0</span>库存：'+res.data[i].stock+'</p>'
           html +=       '</div>'
           html +=       '<div class="card-btn">'
           html +=       '   <img src="images/get.png">'
           html +=       '</div>'
           html += '</li>';
       }
       console.log('--------------------------------------');
       $(".cardlist").html(html);
       if (username == undefined) {

       }
       $(".card-btn").click(function(){
           var othis= $(this);
           var that = $(this).parent().index();
           pro_title = res.data[that].title;
           old_price = (res.data[that].price);
           pro_img = res.data[that].img;
           goods_id = res.data[that].id;
           console.log(goods_id);

           //common('GET',{'goods_id':goods_id},'/share/ticket',function(res){
               res={
                   code:0,
                   data:{
                       ticket:1
                   }
               }

               if (res.code == 0) {
                   //$("#qrcode").prop('src','https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+res.data.ticket);
                   $("#qrcode").prop('src','http://wx.qlogo.cn/mmopen/vi_32/4vqZjbF8LlNQfAsHlHl5icZiaVNNC3zxu6UK8zYicFNd97L8MXZU3ibIyOPZiasMq05JR0X0XLdDqT2p70kaAwAGB7Q/0');
                   $(".copy-con").show();
                   $(".modal-mask").show();

                   var c=document.getElementById("canvas");
                   var qrcode=document.getElementById("qrcode");
                   var ctx=c.getContext("2d");

                   qrcode.onload = function(){
                       ctx.fillStyle="#FFF";
                       ctx.fillRect(5,5,310,370);

                       ctx.fillStyle="#FFEBEC";
                       ctx.fillRect(10,10,300,220);
                       var topImg=$('#pro_img'+goods_id)[0];

                       ctx.drawImage(topImg,50,20,220,200);
                       var oheadImg=document.getElementById("headImg");
                       ctx.drawImage(oheadImg,20,240,30,30);

                       ctx.font = "12px microsoft yahei";
                       ctx.fillStyle="#000";
                       ctx.fillText(username, 60,260);
                       ctx.fillText("我正在与您分享["+pro_title+"]", 20,290);
                       ctx.fillText("共享就可以免费领取", 20,310);
                       ctx.fillStyle="#C92426";
                       ctx.fillText("快来和我分享，一起免费领取吧", 20,330);
                       ctx.fillText("￥0 ", 20,350);
                       ctx.fillStyle="#000000";
                       ctx.fillText("市场价￥"+old_price, 60,350);
                       ctx.fillStyle="#cecece";
                       ctx.fillText("长按二维码领取",215,260);
                       ctx.fillStyle="#FFEBEC";

                       var codeImg=document.getElementById("qrcode");
                       ctx.drawImage(codeImg,210,270,95,95);
                       console.log('-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');

                       var data2=c.toDataURL();
                       console.log(data2);
                       $("#composeImg").attr("src",data2);
                       $("#canvas").hide();
                   }
               }
           //});
       })

   }else if (res.code == -111) {

   }
}

//console.log(encodeURIComponent(window.location.href))
//share();
function share(){
   common('GET',{'url':encodeURIComponent(window.location.href),'app':'share'},'/share/jsconfig',function(res){
       console.log(res);
       // var time = res.data.timestamp.toString();
       // console.log(time);
       wx.config({
           // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
           appId: res.data.appid, // 必填，公众号的唯一标识
           timestamp: res.data.timestamp, // 必填，生成签名的时间戳
           nonceStr: res.data.nonstr, // 必填，生成签名的随机串
           signature: res.data.sign,// 必填，签名，见附录1
           jsApiList: [
               "onMenuShareTimeline",//分享朋友圈接口
               "onMenuShareAppMessage"//分享给朋友接口
           ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
       });
       wx.ready(function(){
           wx.onMenuShareAppMessage({
               title: '免费领取10元京东卡！一起来共享免单吧！', // 分享标题
               desc: '我正在与你共享，快来帮帮我！', // 分享描述
               link: ' ', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
               imgUrl: '', // 分享图标
               type: '', // 分享类型,music、video或link，不填默认为link
               dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
               success: function () {
               },
               cancel: function () {
               }
           });
       });
   });
}