jquery canvas生成带有二维码的海报
程序员文章站
2022-06-09 16:34:58
本文实例为大家分享了jquery canvas生成带有二维码海报的具体代码,供大家参考,具体内容如下需求:点击图片弹窗生成带有二维码的海报。遇到相关问题:1、生成的图片会模糊、不清晰。2、 苹果手机和...
本文实例为大家分享了jquery canvas生成带有二维码海报的具体代码,供大家参考,具体内容如下
需求:点击图片弹窗生成带有二维码的海报。
遇到相关问题:
1、生成的图片会模糊、不清晰。
2、 苹果手机和安卓手机 文字位置和字体大小有差异。
引入所需要的文件
//jquery.js <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> //解决生成的图片模糊、不清晰问题 <script src="/images/202010/hidpi-canvas.min.js"></script>
生成海报图片
<script> // 执行代码 $(function () { // 像素密度 如果没这段代码生成的图片可能会模糊 function getpixelratio(context) { var backingstore = context.backingstorepixelratio || context.webkitbackingstorepixelratio || context.mozbackingstorepixelratio || context.msbackingstorepixelratio || context.obackingstorepixelratio || context.backingstorepixelratio || 1; return (window.devicepixelratio || 1) / backingstore; }; //点击事件 $(".myimg").click(function () { $(".dialog").fadein(); var dialogsrc = $(this).attr("src") var csrftoken = document.queryselector('meta[name="csrf-token"]').getattribute('content'); //2.发送请求 $.ajax({ url: "xxxx", type: "post", datatype: 'json', headers: { 'x-csrf-token': csrftoken }, //设置请求头 success: function (res) { var canvas = document.createelement("canvas"); var context = canvas.getcontext("2d"); var ratio = getpixelratio(context) canvas.width = 262 * ratio; canvas.height = 450 * ratio; context.rect(0, 0, canvas.width * ratio, canvas.height * ratio); context.fillstyle = "#fff"; context.fill(); var myimage2 = new image(); //背景图 myimage2.src = dialogsrc //获取终端 var u = navigator.useragent; var isandroid = u.indexof('android') > -1 || u.indexof('adr') > -1; //android终端 var isios = !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/); //ios终端 myimage2.onload = function () { context.drawimage(myimage2, 0, 0, 262 * ratio, 450 * ratio); //文本 var text = res.data.company + ',' + res.data.sales; var str = new array(); str = text.split(","); var uphight = 0 //解决苹果手机和安卓手机 文字位置和字体大小显示差异问题 for (var i = 0; i < str.length; i++) { if (isandroid) { context.font = "12px calibri"; context.filltext(str[i], 70, 390 + uphight) uphight += 20 } if (isios) { context.font = "20px calibri"; context.filltext(str[i], 140, 450 * ratio - 120 + uphight) uphight += 40 } } var myimage = new image(); //二维码图片 myimage.src = res.data.wxcode myimage.crossorigin = 'anonymous'; myimage.onload = function () { context.drawimage(myimage, 30, 380 * ratio, 48 * ratio, 50 * ratio); var base64 = canvas.todataurl("image/jpeg", 1.0); var img = document.getelementbyid('myposter'); img.setattribute('src', base64); } } }, error: function (e) { console.log('ajax请求异常,异常信息如下:', e); } }); }); //关闭弹窗 $(".close").click(function () { $(".dialog").fadeout(); }) }); </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。