jquery.qrcode.js生成带logo的二维码转成图片格式后logo没有了,大佬们帮忙看下,谢谢了

红尘眷恋丶 2019-01-15 03:55:46
<div class="alert">
<span>
<div class="white_content">
<div id="qrcode" class="qrcode">
</div>
<div class="image">
<img id="img"/>
<h1>长按识别保存二维码</h1>
</div>
</div>
</span>
</div>


<script type="text/javascript">
$(document).ready(function() {
var qrcode=$("#qrcode").qrcode({
render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
text : 'http://jcp.natapp1.cc/gene_detection/authorization.html?openId='+sessionStorage.getItem("openId"), //
扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
width : "200", //二维码的宽度
height : "200", //二维码的高度
background : "#ffffff", //二维码的后景色
foreground : "#000000", //二维码的前景色
src: 'http://jcp.natapp1.cc/gene_detection/image/logo.jpg' //二维码中间的图片
}).hide();
var canvas=qrcode.find('canvas').get(0);
console.log(qrcode.find('canvas'));
var data = canvas.toDataURL('image/jpg');
$('#img').attr('src',data) ;
...全文
658 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
头头什么头 2020-03-02
  • 打赏
  • 举报
回复
logo没有了是因为你的logo图片跨域了,需要在源码中找到生成logo图片那个函数那里,加一句img.setAttribute('crossOrigin', 'anonymous')
前端一只白 2019-12-04
  • 打赏
  • 举报
回复
楼主,这个问题解决了吗?
woshiloudou 2019-01-16
  • 打赏
  • 举报
回复
<div id="container">这里是二维码显示位置</div> <script language="JavaScript"> $(function(){ var options = { render: "canvas", ecLevel: 'H',//识别度 fill: '#000',//二维码颜色 background: '#ffffff',//背景颜色 quiet: 2,//边距 width: 200,//宽度 height: 200, text: "http://www.whui.org",//二维码内容 //中间logo start mode: 4, mSize: 11 * 0.01, mPosX: 50 * 0.01, mPosY: 50 * 0.01, image:$('#img-buffer')[0],//logo图片 //中间logo end label: 'jQuery.qrcode', fontname: 'Ubuntu', fontcolor: '#ff9818', }; $('#container').empty().qrcode(options); }) </script> 注意: 增加中间logo的时候, 嵌入的 logo 的 img 对象 <img src="">,直接传 logo 的 url 并没有用,会直接报错出来,必须用img标签的形式。 当 render 为 canvas 时, img.src 可为 非同域 当 render 为 image 时, img.src 必须为 同域,否则会因为跨域的问题导致报错

81,092

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧