生活不易、且行且珍惜。网站首页 程序人生

Qrcode生成二维码相关问题

发布时间：2019-03-06 16:57编辑：zj 阅读：2878文章分类：开发互动QQ群：170915747

使用Qrcode生成二维码，并提供下载二维码图按钮

JS代码：

<div id="qrcode" style="width:100px; height:100px;margin: 10px 38px;"></div>
<a id="downloadLink"></a>
<a class="btn btn-mini btn-success" onclick="downloadClick()">下载</a>

<script type="text/javascript" src="static/js/qrcode.js"></script>
<script type="text/javascript">	
    var url =#(activityErWeiMaURL);
    //生成二维码
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: url, //生成二维码的内容（链接或者其他）
        width: 200, //生成的二维码的宽度
        height: 200, //生成的二维码的高度
        colorDark : "#000000", // 生成的二维码的深色部分
        colorLight : "#ffffff", //生成二维码的浅色部分
        correctLevel : QRCode.CorrectLevel.L,//纠错等级  
        background : "#ffffff",//背景颜色  
        foreground : "#000000",//前景颜色
        src : '../img/pm.jpg'  //二维码中间的图片
  });
    //下载二维码
  function downloadClick () {
	  var name= "#(name)";
	    // 获取base64的图片节点
	    var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
	    // 构建画布
	    var canvas = document.createElement('canvas');
	    canvas.width = img.width;
	    canvas.height = img.height;
	    canvas.getContext('2d').drawImage(img, 0, 0);
	    // 构造url
	    url = canvas.toDataURL('image/png');
	    // 构造a标签并模拟点击
	    var downloadLink = document.getElementById('downloadLink');
	    downloadLink.setAttribute('href', url);
	    downloadLink.setAttribute('download', name+'.png');
	    downloadLink.click();
	  }
</script>

将生成的二维码替换为图片格式，使得手机可以长按保存操作：

    <div id="qrcode" style="width:250px; height:250px;margin: 0 auto;"></div>
   <div id="qrcodeNone" style="display: none;"></div>
   
<script type="text/javascript" src="static/js/qrcode.js"></script>
<script type="text/javascript">
function qrcodeStart(packagesId){
	$("img[alt='Scan me!']").remove(); //重复生成二维码时，删除前一张
	$("#qrcode").html(""); //重复生成二维码时，删除前一张（手机端加上这个才能清除）
	$("#qrcodeNone").html(""); //重复生成二维码时，清除前一张

	var urlLink = $('#pagelink').val();
	var codesmer= $('#codesmer').val();
	var url = urlLink + "codepage/codepage?codesmer=" + codesmer+"&&packagesId="+packagesId; //根据需求拼接地址
	var qrcode = new QRCode(document.getElementById("qrcodeNone"), {
		    text: url,
		    width: 200, //生成的二维码的宽度
		    height: 200, //生成的二维码的高度
		    colorDark : "#000000", // 生成的二维码的深色部分
		    colorLight : "#ffffff", //生成二维码的浅色部分
		    correctLevel : QRCode.CorrectLevel.L
		  });
	 //获取网页中的canvas对象
    var mycanvas1=document.getElementsByTagName('canvas')[0];
    mycanvas1.style.display = 'none';//隐藏生成的canvas
    //将转换后的img标签插入到html中
    var img=convertCanvasToImage(mycanvas1);

    $('#qrcode').append(img);//imagQrDiv表示你要插入的容器id
	};
	

    //从 canvas 提取图片 image
    function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
</script>

生成带二维码海报样式

 <div class="body" >
      <div id="qrcode" style="margin: 0 auto;"></div>
      <div id="canbox">
	 <canvas style="display:none;" id="myCanvas" ></canvas>
       </div>
       <img class="canimg"  src=""/>
       <div id="qrcodeNone" style="width:250px; height:250px;margin: 0 auto;display: none;"></div>
 </div>



function qrcodeStart(packageId,imgUrl,nameVal){
	$("img[alt='Scan me!']").remove();
	$("#qrcode").html("");
	$("#qrcodeNone").html("");
	document.getElementById("page-qrcode").style.display="block";
	var urlLink = $('#pagelink').val();
	var code = $('#code').val();
	var url = urlLink + "codepage/codepage?code=" + code+"&&packageId="+packageId;
	var qrcode = new QRCode(document.getElementById("qrcodeNone"), {
		    text: url,
		    width: 250, //生成的二维码的宽度
		    height: 250, //生成的二维码的高度
		    colorDark : "#000000", // 生成的二维码的深色部分
		    colorLight : "#ffffff", //生成二维码的浅色部分
		    correctLevel : QRCode.CorrectLevel.L
		  });
/* 	 //获取网页中的canvas对象
    var mycanvas1=document.getElementsByTagName('canvas')[0];
    mycanvas1.style.display = 'none';//隐藏生成的canvas
    //将转换后的img标签插入到html中
    var img=convertCanvasToImage(mycanvas1);

    $('#qrcode').append(img);//imagQrDiv表示你要插入的容器id */
  //画海报
    var width =330 //宽度 
    var height = 410 // 高度
    var c = document.getElementById("myCanvas");
    c.width = width
    c.height = height
    var ctx = c.getContext("2d");
    //首先画上背景图
    var img = new Image();
    img.crossOrigin="anonymous";
    img.src = imgUrl;
    var x_bot = height - 280 //画上名字
    var y_bot =  width - 265 
    ctx.font = "20px Georgia";
    //画上二维码
    function convertCanvasToImage(canvas) {
     var image = new Image();
     image.crossOrigin="anonymous";
     image.src = canvas.toDataURL("image/png");
     return image;
    }
    var mycans = $('canvas')[1];//二维码所在的canvas
    var codeimg = convertCanvasToImage(mycans)
    console.log(mycans.toDataURL("image/png"))
    var xw = width - 265 
    var xh = height - 215
    img.onload = function() { //必须等待图片加载完成
     ctx.drawImage(img, 0, 0, width, height); //绘制图像进行拉伸
     ctx.fillText('', y_bot, x_bot);//需要名称在‘’加nameVal
     ctx.drawImage(codeimg, xw, xh, 200, 200);
     //绘制完成,转为图片
     setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeout
     var bigcan = $('canvas')[0];
     let images = new Image();
     images.crossOrigin="anonymous";
     images.src = bigcan.toDataURL("image/png");
     $('.canimg').attr('src', bigcan.toDataURL("image/png"))
     }, 0)
    }
    
	};

此方法需要注意背景图的跨域问题，上面的imgUrl用的是阿里云oss服务器的，本项目是在另一个服务器的，js里面会报这几个错

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Failed to load resource: net::ERR_FAILED

No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法是：

首先

  var img=new Image;
  img= img.crossOrigin="anonymous"; 
 img.src="图片地址";

注意顺序，然后还有就是去阿里云修改服务器配置

参考http://blog.sina.com.cn/s/blog_e4bd46a00102xn92.html

Java生成方法

String text = contextPath + "codepage/codepage?code=" + merchantInfo.getExtensionCode();

 private String getQRImg(String text, MerchantInfo merchantInfo) {
        String fileName = "";
        try {
            // 设置二维码参数
            Map<EncodeHintType, Object> hints = new HashMap<EncodeHintType, Object>();
            hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
            BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, 150, 150, hints);
            // 返回二维码
            BufferedImage bufferedImage = MatrixToImageWriter.toBufferedImage(bitMatrix);
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            ImageIO.write(bufferedImage, "jpg", os);
            InputStream is = new ByteArrayInputStream(os.toByteArray());
            fileName = FileUpload.fileUp(is, Tools.getRandomString(7), ".jpg", os.size());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return fileName;
    }

其他：

参数说明

new QRCode(element, option)

名称	默认值	说明
element	-	显示二维码的元素或该元素的 ID
option		参数配置

option 参数说明

名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H