H5二维码海报生成保存相关问题记录
最近在开发H5页面中遇到二维码生成保存并下载到系统相册中的问题。问题大致分为:生成海报不全,未按照H5页面的显示进行海报保存,图片模糊等相关问题。
使用技术:qrcode + html2canvas
1、生成二维码
代码示例如下:(可参照官网所需进行配置)
$('#qrCode').qrcode({
render:"canvas",
width: 84,//宽度
height: 84,//高度
correctLevel:0,//纠错等级(非必须)
text: "https://www.google.com",//生成二维码的文本
});
2、生成二维码海报并保存到相册
① 保存到相册功能由于场景不同可能需要客户端进行相应的处理,项目此处是app内嵌H5。所以app客户端开发同样做了一定的处理,这样才能将生成的海报图片保存到手机系统相册。如果不做特定处理的话,按照以下代码书写的话,在某些浏览器中点击保存按钮并不会有反应。
② 计算偏移量的步骤相对重要,因为图片不是充满整个屏幕,导致不同分辨率下的图片大小不一,占据屏幕的区域也相对不同
③ 获取设备DPI,使用dpi作为缩放参数与文字的清晰度有关。
④ 海报图片,不要使用背景图,如果使用背景图保存的图片背景会模糊不清。
⑤生成二维码的链接如果过长,且二维码占比相对较小的话,即二维码图片较小,则生成的二维码图案将会相对密集,会导致二维码无法扫描。
代码示例如下:
$(".save-poster-btn").on("click", function (event) {
var width = $(".poster-box").width();//dom宽
var height = $(".poster-box").height();//dom高
var scaleBy = DPR(); //放大倍数
var canvas = document.createElement('canvas');
canvas.width = width * scaleBy;//canvas宽度
canvas.height = height * scaleBy;//canvas高度
// 调整图片清晰度
var context = canvas.getContext("2d");
context.scale(scaleBy,scaleBy);
// 修改偏移量 -- 重要
var rect = $(".poster-box").offset();//获取元素相对于视察的偏移量
//设置context位置,值为相对于视窗的偏移量负值,让图片复位
context.translate(-rect.left, -rect.top);
html2canvas($(".poster-box"), {
dpi: scaleBy,
scale: scaleBy,
canvas: canvas,
width: width,
heigth: height,
backgroundColor: 'transparent',
allowTaint: true //允许画布上有跨域图片
}).then(function (canvas) {
var dataUrl = canvas.toDataURL();
var alink = document.createElement("a");
alink.href = dataUrl;
alink.id = "qrCode-download";
alink.download = "qrPoster.png";
alink.click();
});
});
3、获取设备dpi
代码示例如下:
function DPR(){ // 获取设备dpi
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
}