首页 前端知识 jquery.qrcode.min.js生成二维码生成白边的简单解决方法

jquery.qrcode.min.js生成二维码生成白边的简单解决方法

2024-08-10 22:08:43 前端知识 前端哥 519 907 我要收藏

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。我的输出的图片格式,大家根据自己的需求场景决定是不是要图片格式。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15265.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!