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
This article example shares the specific code of ...
When configuring the interface domain name, each ...
The main text starts below. 123WORDPRESS.COM Down...
Version update, the password field in the origina...
Table of contents 1. Quick understanding of conce...
What is a memory leak? A memory leak means that a...
Introduction to Dockerfile Docker can automatical...
1. Command method Run the nginx service in the cr...
Table of contents 1. Why NanoID is replacing UUID...
This article shares the specific code of Vue to i...
1. Install dependency packages yum -y install gcc...
Table of contents 1. Introduction 2. What is func...
Table of contents Methods that do not change the ...
Today I was browsing the blog site - shoptalkshow...
It’s National Day, and everyone is eager to celeb...