jquery.qrcode.min.js生成的二维码没有白边,巨丑。网上找了一圈解决方案,全部不靠谱,最终自己几行代码搞定了,供大家参考。
$(ele).empty(); //中文格式转换 var str = toUtf8(txt); //生成二维码 $(ele).qrcode({ render: "canvas", //canvas和table两种渲染方式 width: width, height: height, text: str, }); var canvas = $(ele).find("canvas").get(0); // 创建新的canvas元素 var newCanvas = document.createElement('canvas'); var borderSize = 15; // 边框大小 newCanvas.width = canvas.width + borderSize * 2; // 增加左右边框 newCanvas.height = canvas.height + borderSize * 2; // 增加上下边框 var context = newCanvas.getContext('2d'); // 绘制白色背景 context.fillStyle = '#FFFFFF'; context.fillRect(0, 0, newCanvas.width, newCanvas.height); // 在白色背景上绘制原始canvas的内容 context.drawImage(canvas, borderSize, borderSize); // 将新的canvas转换为DataURL var dataURL = newCanvas.toDataURL("image/png");
复制
总结:核心就是canva重绘,重新绘制带有边框的canva。我的输出的图片格式,大家根据自己的需求场景决定是不是要图片格式。