微信公众号能正常canvas绘图，可是 toDataURL生成图片连接则报报SecurityError (DOM Exception 18): The operation is insecure.
<!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
- 1. 使用 Canvas 生成公众号头图
- 2. 微信公众号图片无法正常显示
- 3. 微信公众号图片外链
- 4. 微信小程序利用canvas生成海报分享图片
- 5. 红圈律所微信公众号图文数据报告
- 6. 微信小程序Canvas绘制图案（生成海报、朋友圈海报）
- 7. vue生成canvas海报图
- 8. 微信公众号获取的图片不能正常显示的问题
- 9. html dom 转化成图片踩坑记（canvas toDataURL）
- 10. 微信公众号接入异常
- 更多相关文章...
- • R 绘图 - 饼图 - R 语言教程
- • Markdown 图片 - Markdown 教程
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • Git可视化极简易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。