In the previous words…

There is a list of functional products in the recent project, which can generate different TWO-DIMENSIONAL codes for different products. Scanning codes can enter the corresponding product details page. At the same time, the two-dimensional code needs to be with the company logo, and the function of downloading pictures on wechat can be adjusted by long pressing

First, we will introduce a well-known plug-in QRcode that generates QR codes

  1. This plug-in is packaged based on JQ so you need to import JQ before using it
  2. Usage is also relatively simple and directly on the code
<div id="qrcode" class="qrcode clip"></div>
<canvas id="myCanvas" width="200" height="200" class="qrcode clip"></canvas>
<img id="canvasImg" alt="" width="200" height="200" class="qrcode">
let src = "/static/imgs/settle.png"; // Want to display the two-dimensional code in the middle of the picture $("#qrcode").qrcode({
 	render: "canvas", // Set the rendering mode, there are table and canvas, using canvas rendering performance is relatively good, // the content displayed after scanning two-dimensional code, can directly fill in a url, after scanning two-dimensional code automatically jump to the link:"200"// The width of the qr code is height:"200", // The height of the two-dimensional code background:"#ffffff", // 2d barcode foreground foreground:"# 000000"});});});Copy the code

If you are careful, you will find that the QR code with logo has been displayed. When we open the page in the mobile phone, we cannot hold up the long press to save the QR code. The reason is that we use the plug-in to generate canvas instead of IMG, so we need to enter the real theme and use canvas to generate pictures

Use canvas to generate images

  • First of all, let’s sort out our thinking. We have got canvas from the above method. Can canvas be directly converted into a picture
  • Canvas. ToDataURL () is introduced, which converts canvas into Base64. Base64 can be used as SRC of IMG, so canvas can be successfully converted into a picture. The toDataURL I’m using here (“image/ PNG “) 
    convertCanvasToImage() {
    var canvas = $("#qrcode canvas")[0].toDataURL("image/png")
    return canvas
 }
Copy the code
  • However, when we finished the transformation, we found that the transformed Base64 was only a TWO-DIMENSIONAL code without logo. According to my analysis, the plug-in did not really synthesize the logo. We need to synthesize the logo and Base64 into a picture, so we need to use canvas to synthesize the picture

Use canvas to compose images

  • So first of all, let’s sort out our ideas. In fact, what we need to do is to use canvas drawImage to draw pictures and then base64. Draw it with the logo, and finally switch to Base64 together
  • One problem here is that img.onload method is needed for drawing, which is asynchronous and requires local service support. Some students may write demo on local static page, but they cannot display the final synthetic Base64, because there is no service. So use Node, or put it in a project like Vue NG to see how it works
export function creatEwm(base64, canvas,callback) {
 var ctx = canvas.getContext("2d");
 var img = document.createElement('img');
 img.src = '/static/imgs/icon-phone.png'
 img.onload = function () {
   var imgUpload = new Image();
   imgUpload.src = base64();
   imgUpload.onload = functionDrawImage (imgUpload, 0, 0, 200, 200); drawImage(imgUpload, 0, 0, 200); ctx.drawImage(img, 78, 80, 40, 40); callback(canvas.toDataURL("image/png"))}; }}Copy the code
  • Above I have encapsulated the methods that generate the final base64
  • Parameter one base64 is the base64 from which we first generated the qrcode with qrcode which is the return value of the convertCanvasToImage method that I wrote above
  • Parameter 2 is the node of the canvas to be drawn, which is different from the node of Qrcode and needs to be redefined. That is, I defined the canvas tag with id myCanvas at the beginning
  • As mentioned above, img.onload is an asynchronous load, so we cannot get the final base64. We can get asynchronous data through callback, and of course we can also use promise and other methods
  • In this method, the required logo is introduced but this time there is no place to hold the image. So we need to create a new empty IMG tag to hold, and then we can use the drawImage method, of course we can also use the new Image() method
  • The same is true for base64 passed in.
  • Why img.onload? The reason is that we need to wait for the completion of image loading before operation, and the method of image loading is better to write nested, after picture 1 is finished loading picture 2
  • The final incoming callback renders the last base retrieved as SRC into HTML
creatEwm(this.convertCanvasToImage, document.getElementById('myCanvas'), function (dataUrl) {
   document.getElementById("canvasImg").src = dataUrl
})
Copy the code

conclusion

The above completed the front-end to generate two-dimensional code, and after encapsulation, the code written in the page is very small, you can achieve different two-dimensional code with different information, and can be adjusted up long press download picture.