This article shares the specific code for using jQuery canvas to generate a poster with a QR code for your reference. The specific content is as follows Requirement: Click on the image pop-up window to generate a poster with a QR code. Related problems encountered: 1. The generated images will be blurry and unclear. Import the required files //jquery.js <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> //Solve the problem of blurred and unclear generated images<script src="/images/202010/hidpi-canvas.min.js"></script> Generate poster image <script> // Execute code$(function () { // Pixel density Without this code, the generated image may be blurry function getPixelRatio(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }; //Click event $(".myImg").click(function () { $(".dialog").fadeIn(); var dialogSrc = $(this).attr("src") var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); //2. Send request$.ajax({ url: "xxxx", type: "post", dataType: 'json', headers: { 'X-CSRF-TOKEN': csrfToken }, //Set request header 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(); //Background image myImage2.src = dialogSrc //Get the terminal var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android terminal var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios terminal myImage2.onload = function () { context.drawImage(myImage2, 0, 0, 262 * ratio, 450 * ratio); //text var text = res.data.company + ',' + res.data.sales; var str = new Array(); str = text.split(","); var uphight = 0 //Solve the problem of text position and font size display differences between Apple and Android phones 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(); //QR code 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 request exception, exception information is as follows:', e); } }); }); //Close the pop-up window$(".close").click(function () { $(".dialog").fadeOut(); }) }); </script> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: A brief discussion on the problem of Docker run container being in created state
>>: Use js to call js functions in iframe pages
The default operating mode of MySQL is autocommit...
I like to pay attention to some news on weekdays a...
Enable remote access Enable remote access rights ...
MySQL download and installation (version 8.0.20) ...
This article example shares the specific code of ...
1. Dashed box when cancel button is pressed <br...
difficulty Two mask creation of svg graphics Firs...
Table of contents Scenario: The server database n...
Table of contents 1. substring() 2. substr() 3.in...
getElementById cannot get the object There is a s...
This article shares the specific steps for config...
Table of contents 1. Email 2. Mobile phone number...
Preface Previously, I talked about the problem of...
Mysql join query 1. Basic concepts Connect each r...
This article shares the specific code for JavaScr...