h5中【jquery.qrcode+canvas】生成图片分享卡长按保存到手机

最新推荐文章于 2022-05-12 15:09:05 发布

记录学习123

最新推荐文章于 2022-05-12 15:09:05 发布

阅读量1.3k

点赞数

文章标签： jquery 前端 html5

本文链接：https://blog.csdn.net/xiongxiaoning/article/details/121947133

版权

jquery.qrcode+canvas使用生成分享卡

html代码

html完整代码：

 <html>
	<head>
		<meta charset="utf-8">
		<title>分享卡</title>
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<script src="static/js/jquery-1.8.3.min.js"></script>
		<script src="static/js/jquery.qrcode.js"></script>
		<script src="static/js/jquery.qrcode.min.js"></script>
		<style type="text/css">
			 *{
				 margin: 0;
			 }
			 html,body,.showPoster,#img{
			 	height: 100%;
			 	width: 100%;
			}
			.showPoster{
				position: absolute;
				top: 0;
				left: 0;
			}	
		 </style>
	</head>
	<body >
		<!--二维码画布-->
		<div id="qrcode" style="display: none;"></div>
		<!--二维码图片展示-->
		<img id='imgOne'  style='display: none;'/>
		<!--海报图画布-->
		<canvas id="canvas"  style="display: none;"></canvas>
		<!--展示海报-->
		<div class="showPoster">
		    <img id="img" />
		</div>

		<script type="text/javascript" src="aa.js"></script>
	</body>
</html>

js代码

var url = 'http://www.baidu.com';
var headimgsrc = '微信头像地址';
var name = 'ceshi' + '邀请您';
$('#qrcode').html("");
//生成二维码（异步生成）
var qrcode = $('#qrcode').qrcode(url);
var canvas = qrcode.find('canvas').get(0);
$('#imgOne').attr('src', canvas.toDataURL('image/jpg'))
console.log($("#imgOne")[0].src);
beginDraw();
// $('#qrcode').qrcode(url);
// qrcodeimg=$('#qrcode img');
// console.log(qrcodeimg);
// qrcodeimg.onload = function() {
//     console.log('here');
// }

function beginDraw() {
    //画海报
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var ratio = getPixelRatio(ctx);

    var width = window.innerWidth
    var height = window.innerHeight
    //设置canvas宽高
    c.width = width * ratio
    c.height = height * ratio
    //首先画上背景图
    var imgBg = new Image();
    imgBg.crossOrigin = "anonymous";
    imgBg.src = 'img/sharebg.jpg';
    imgBg.onload = function () {
        ctx.drawImage(imgBg, 0, 0, width * ratio, height * ratio);
        //写入文字
        ctx.fillStyle = "#353535";
        font = 'normal bolder ' + 18 * ratio + 'px 微软雅黑';
        namex = width * 0.26 * ratio;
        namey = height * 0.07 * ratio;
        ctx.font = font;
        console.log(font)
        ctx.fillText(name, namex, namey);
        //绘制二维码
        var codefinal = new Image();
        codefinal.crossOrigin = "anonymous";
        codefinal.src = $("#imgOne")[0].src;//二维码img;
        codefinal.onload = function () {
            codex = width * 0.6 * ratio;
            codey = height * 0.7 * ratio;
            ctx.drawImage(codefinal, codex, codey, 120 * ratio, 120 * ratio);
            //绘制头像
            var headimg = new Image();
            headimg.crossOrigin = "anonymous";
            headimg.src = headimgsrc;
            headx = width * 0.05 * ratio;
            heady = height * 0.02 * ratio;
            headimg.onload = function () {
                //绘制圆形头像
                ctx.arc(headx + 25 * ratio, heady + 25 * ratio, 25 * ratio, 0, 2 * Math.PI);
                ctx.strokeStyle = '#C67CD5'; // 设置绘制圆形边框的颜色
                ctx.stroke(); // 绘制出圆形，默认为黑色，可通过 ctx.strokeStyle = '#FFFFFF'， 设置想要的颜色
                ctx.clip();
                ctx.drawImage(headimg, headx, heady, 50 * ratio, 50 * ratio);
                //绘制完成,转为图像
                base64_path = c.toDataURL("image/jpeg", 1);
                $('#img').attr('src', base64_path)
                $('.mask').show()
                $('.showPoster').show()
            }
        };


    };
};
//获取屏幕像素比
function getPixelRatio() {
    var ctx = document.createElement('canvas').getContext('2d');
    var dpr = window.devicePixelRatio || 1;
    var bsr = ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1;
    return dpr / bsr;
}

踩过的坑

最初使用qrcode的生成动态二维码的方法：

var url='http://www.baidu.com';
$('#qrcode').html("");
var qrcode = new QRCode('qrcode', {
	text: url,
	width: 100,
	height: 100,
	colorDark: '#000000',
	colorLight: '#ffffff',
	correctLevel: QRCode.CorrectLevel.H
});
qrcodeImg = $("#qrcode img")[0];
qrcodeImg.crossOrigin = "anonymous"
//这里必须用onload 二维码是异步生成 
qrcodeImg.onload = function() {
 //画海报
	 beginDraw()
}

存在问题：
在电脑上加载正常，可是放到手机上完全空白，调试很久！！！找不到原因
后来逐步调试，看了很多百度，发现就没有进入qrcodeImg.onload方法；
总结来说，说是因为qrcode生成的二维码是动态的canvas+img结构，而jquery是无法获取动态的元素结构的，使用console.log($("#imgOne")[0].src);打印是是undefined，并且如果非要获取，可以用事件绑定，但是我们是页面一打开，就希望是一张图片，所以切换思路；
最终，获取qrcode生成的二维码，将其转为图片，将src赋给页面已有的img结构，这样，再次打印就可以获取路径了。
至此，功能完成，还是对jQuery理解不够深刻呀！

记录学习123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5中【jquery.qrcode+canvas】生成图片分享卡长按保存到手机

jquery.qrcode+canvas使用生成分享卡html代码js代码踩过的坑html代码html完整代码： <html> <head> <meta charset="utf-8"> <title>分享卡</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-s
复制链接

扫一扫