这里我是用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);