jquery canvas生成帶有二維碼的海報
阿新 • • 發佈:2021-10-29
本文例項為大家分享了 canvas生成帶有二維碼海報的具體程式碼,供大家參考,具體內容如下
需求:點選圖片彈窗生成帶有二維碼的海報。
遇到相關問題:
1、生成的圖片會模糊、不清晰。
2、 蘋果手機和安卓手機 文字位置和字型大小有差異。
引入所需要的檔案
//jquery. <script type="text/" 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"]').ghttp://www.cppcns.cometAttribute('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,canvas.width * ratio,canvas.height * ratio); context.fillStyle = "#fff"; context.fill(); var myImage2 = new Image(); //背景圖 myImage2.src = dialogSrc //獲取終端 var u = navigator.userAgent; var is = 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,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; ihttp://www.cppcns.com++) { if (isAndroid) { DFiAa 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。