生成带二维码的海报图

这里我是用html2canvas.js去做的，遇到最大的问题就是生成的图片模糊。百度了好久，最终我解决了，去下载最新的html2canvas.js已经有了提供解决的方法。生成二维码的是用qrcode.js

qrcode.js引用地址：http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js
html2canvas.js下载地址： http://html2canvas.hertzen.com/

我的实现思路是将生成的二维码贴到海报底图上 然后div用html2canvas转换成base64的图片。

1.生成二维码的代码

$("#qrcode").qrcode({
    width: 100, //宽度
    height:100, //高度
    text: "http://www.baidu.com" //url
});

2.转换成图片的代码

var copyDom = $("#content");

    var width = copyDom.offsetWidth;//dom宽

    var height = copyDom.offsetHeight;//dom高

    var scale = 2;//放大倍数

    html2canvas(copyDom[0], {

        dpi: window.devicePixelRatio*2,//最新html2canvas支持的属性 解决模糊的关键

        scale:scale,

        width:width,

        heigth:height,

    }).then(function (canvas) {

        var url = canvas.toDataURL(); //base64格式的图片

    });

ps:还有图片跨域的问题我是用PHP去解决的

图片转换成base64传到前端，海报底图我是放到oss上的页面直接引用。canvas会存在跨域问题。

function imgtobase64($img='', $imgHtmlCode=true){//图片转base64
	
	$imageInfo = getimagesize($img);
	
	$base64 = "" . chunk_split(base64_encode(file_get_contents($img)));
	
	return 'data:' . $imageInfo['mime'] . ';base64,' . chunk_split(base64_encode(file_get_contents($img)));
	
}

$base64_img = imgtobase64($img);