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

Springboot+VUE to realize login and registration

This article example shares the specific code of ...

Nginx operation and maintenance domain name verification method example

When configuring the interface domain name, each ...

How to create a flame effect using CSS

The main text starts below. 123WORDPRESS.COM Down...

Tutorial on how to modify the root password in MySQL 5.7

Version update, the password field in the origina...

Quick understanding and example application of Vuex state machine

Table of contents 1. Quick understanding of conce...

Vue: Detailed explanation of memory leaks

What is a memory leak? A memory leak means that a...

Example of using Dockerfile to build an nginx image

Introduction to Dockerfile Docker can automatical...

Docker advanced method of rapid expansion

1. Command method Run the nginx service in the cr...

JS generates unique ID methods: UUID and NanoID

Table of contents 1. Why NanoID is replacing UUID...

Vue implements a simple shopping cart example

This article shares the specific code of Vue to i...

MySQL 5.7.10 Installation Documentation Tutorial

1. Install dependency packages yum -y install gcc...

JavaScript functional programming basics

Table of contents 1. Introduction 2. What is func...

Detailed explanation of common methods of JavaScript Array

Table of contents Methods that do not change the ...

Implementation of CSS Fantastic Border Animation Effect

Today I was browsing the blog site - shoptalkshow...

One line of CSS code to achieve the integration of avatar and national flag

It’s National Day, and everyone is eager to celeb...