Introduction: I believe that many students in the actual work of the project will meet the click to form a TWO-DIMENSIONAL code, jump to a new page to show the two-dimensional code of the project requirements. There are many kinds of ideas to solve the problem, today THE author introduces a simple implementation of the idea, for your reference, the actual implementation of this small function is actually very simple.

The effect of the demo

Two thinking how to make it come true

How do you implement this requirement

First of all, we need to generate the TWO-DIMENSIONAL code, and to open a new page display, so we need the IMG tag to show the image carrier, so generating the image SRC is essential. Whether we’re working on a SPA project or a multi-page application, we’re going to use Base64 to store image information. Therefore, we need to convert the generated TWO-DIMENSIONAL code into Base64. So let’s get our heads together.

Sorting out specific ideas

Step 1: We need to link the target TWO-DIMENSIONAL code to generate two-dimensional code.

Step 2: Convert the TWO-DIMENSIONAL code generated in the previous step into base64 format URL, and save the URL.

Step 3: Open a new page, obtain the saved URL, display the generated TWO-DIMENSIONAL code.

1 introductionarale-qrcodelibrary

First of all, we need to draw the connection into the TWO-DIMENSIONAL code, so I recommend a library to form the two-dimensional code arale-Qrcode. It can generate A DOM node in the form of SVG or table based on an incoming QR code link.

import AraleQRCode from 'arale-qrcode'
const result = new AraleQRCode({
  	render:  "svg"./* Generate type 'SVG' or 'table DOM element type */
  	text:'https://juejin.cn/post/6895011670301605896'./* Link to qr code */
  	size: 100                                          /* Size of qr code */
})

console.log(result)
Copy the code

Let’s see what AraleQRCode has turned the QR code link into.

Yes, AraleQRCode turns our QR code into a real DOM node, which would be fine if it were displayed on the current page, but that’s not what we want, because we need to display the generated QR code on the new page. How do we convert the current node to base64

2 XMLSerializerserializationxml

What is XMLSerializer, a less commonly used API, for? The XMLSerializer object enables you to convert or “serialize” an XML document or Node object into a string of unparsed XML tags. We instantiate it with no arguments and then call the serializeToString method to make the Node object a string.

Example:

const div = document.createElement('div')
div.innerText = 'hello,world'
const result = new XMLSerializer().serializeToString(div)
console.log(result)
Copy the code

Let’s see what the XMLSerializer does.

Yes, this turns a real DOM into a string. To get back to business, we need the SVG XML document generated in the previous step to be converted to a string.

import AraleQRCode from 'arale-qrcode'
const result = new AraleQRCode({
  	render:  "svg"./* Generate type 'SVG' or 'table DOM element type */
  	text:'https://juejin.cn/post/6895011670301605896'./* Link to qr code */
  	size: 100                                          /* Size of qr code */
})
const svgXml = new XMLSerializer().serializeToString(result)
console.log(svgXml)
Copy the code

The print result is as follows:

Note:XMLSerializerforieBrowsers have compatibility, so we need to do extra compatibility.

3 window.btoaConverted intourl, delivered across pagesurl

Next we need to convert our newly generated SVG characters to Base64 format. We can use the window.btoa method. Create a base-64 encoded string. In addition to window.btoa, we also need a secondary transcoding encodeURIComponent string as the URI component for encoding and decoding. Unescape decodes the encoded string.

 const src = 'data:image/svg+xml; base64,' + window.btoa(unescape(encodeURIComponent(svgXml)))
Copy the code

Now that we have the base64 image URL we want, what we do is pass the URL across the page.

There’s a little trick here, because we’re opening a new window and the base64 file we’re generating isn’t going to be that big, so it’s best to use localStorage here.

localStorage.setItem('image',src)
window.open('http://localhost:8888/image')
Copy the code

Save the SRC from the previous step. This completes the url generation to save.

The complete code is shown below

Generate two-dimensional code page

const index = () = > {
  const text = () = >{
    const result = new AraleQRCode({
       render:  "svg"./* Generate type 'SVG' or 'table DOM element type */
  	   text:'https://juejin.cn/post/6895011670301605896'./* Link to qr code */
  	   size: 100                                          /* Size of qr code */
    })
    const svgXml = new XMLSerializer().serializeToString(result)
    const src = 'data:image/svg+xml; base64,' + window.btoa(unescape(encodeURIComponent(svgXml)))
    localStorage.setItem('image',src)
    window.open('http://localhost:8888/image')}return <div className="page" >
    <p className="cur" >The current url:<span> https://juejin.cn/post/6895011670301605896 </span> </p>
    <div className="btns" >
        <button onClick={text } >Click to generate qr code</button>
    </div>
  </div>
}
Copy the code

Accept QR code page

function index(){
    const img:any = localStorage.getItem('image')
    localStorage.removeItem('image')
   return <div className="mast" >
      <div className="img_content" > <img src={img} /></div>
   </div>
}
Copy the code

Note: Don’t forget to clear the local cache when we receive the URL.

I’ll write three at the end

The above summarizes a specific implementation scheme to generate + cross-page display two-dimensional code, and it has been applied in real projects. In practical work, if students encounter similar problems, I hope this article can bring you ideas to solve such problems.

Related front-end technology tips dome article:

H5, small program flying into the shopping cart – parabola drawing motion trajectory point 260+ 👍

Finally, thank you for reading, if you feel good, please click “like” + follow a wave, continue to share technical articles.

Public number: Front-end Sharing