H5二维码海报生成保存相关问题记录

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;
    }

---