微信公衆號能正常canvas繪圖，可是 toDataURL生成圖片連接則報報SecurityError (DOM Exception 18): The operation is insecure.

時間  2019-12-11
標籤 微信 公衆號 正常 canvas 繪圖 可是 todataurl 生成 圖片 連接 securityerror dom exception operation insecure 欄目 HTML 简体版
原文   原文鏈接

<!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>  
        <!---先加載圖片，方便canvas繪圖-->
        <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);//顯示給用戶    javascript

$(".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();
})css

function common(type,data,url,fun){
     $.ajax({
        type:type,
        url:getHostApi(url),
        data:data,
        dataType: 'json',
        beforeSend:function(){ 
              $("#loading").html("<img src='./images/loading_16.gif'>"); 
         }, 
        success:function(datas){
            fun(datas);
        },
        complete:function(){ 
            $("#loading").empty(); 
        }, 
        error:function(){
             $("#loading").empty(); 
            Simpop({
                'content': '',
                'time': 800
            }).show()
        }
    })
}
common('GET',{},'/share/goods',goods);
var pro_id = ''
var pro_title = '';
var old_price = '';
var pro_img = '';
var goods_id = '';
var show = parseParams(href).show;html

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) {
       
    }
} java

//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 () {  
                } 
            }); 
        });
    });
}web

</script>
</html>ajax

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程