jQuery canvas generates a poster with a QR code

jQuery canvas generates a poster with a QR code

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.
2. There are differences in text position and font size between Apple and Android phones.

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:
  • Implementing parallax effect of Apple TV poster based on jQuery and CSS3
  • Use the jquery package to generate a QR code image from a string
  • Use jquery.qrcode to generate a QR code on the page and support Chinese
  • Use jQuery component qrcode to generate QR code and application guide
  • Use jquery.qrcode to generate a color QR code example
  • JavaScript generates a QR code that supports Chinese characters and logos (jquery.qrcode.js)
  • jQuery plugin qrcode generates QR code online
  • Use jQuery.Qrcode plugin to dynamically generate QR code on the client and add custom logo
  • Example of using jquery.qrcode to generate QR code online
  • jQuery generates svg vector QR code

<<:  A brief discussion on the problem of Docker run container being in created state

>>:  Use js to call js functions in iframe pages

Recommend

MySQL transaction autocommit automatic commit operation

The default operating mode of MySQL is autocommit...

Detailed explanation of common commands in MySQL 8.0+

Enable remote access Enable remote access rights ...

MySQL 8.0.20 installation and configuration method graphic tutorial

MySQL download and installation (version 8.0.20) ...

Bootstrap FileInput implements image upload function

This article example shares the specific code of ...

Web design tips on form input boxes

1. Dashed box when cancel button is pressed <br...

Example code for realizing charging effect of B station with css+svg

difficulty Two mask creation of svg graphics Firs...

Implementation script for scheduled database backup in Linux

Table of contents Scenario: The server database n...

Windows10 mysql 8.0.12 non-installation version configuration startup method

This article shares the specific steps for config...

Commonly used js function methods in the front end

Table of contents 1. Email 2. Mobile phone number...

How to solve the problem of blurry small icons on mobile devices

Preface Previously, I talked about the problem of...

Mysql join query principle knowledge points

Mysql join query 1. Basic concepts Connect each r...

JavaScript to implement the web version of the snake game

This article shares the specific code for JavaScr...