background

With the development of network, more and more network platforms emerge at the historic moment. How to get more traffic and attract more eyeballs has become a necessary condition for the survival and development of network platforms. Now the network platform is the most common way of publicity is inviting people.

Recently, I received a demand to make a poster page and save it to my mobile phone for users to share with their friends, hoping to achieve the effect of inviting others.

It gives people the first impression that this requirement is the function of saving pictures. At that time, combing is found to be not so simple:

  1. Dynamically generate a TWO-DIMENSIONAL code with logo
  2. The HTML portion of the entire poster is converted to an image
  3. Save pictures to mobile phone album

Generate the QR code with logo

Generate the QR code with logo with vue_QrCodes

The installation

npm install vue_qrcodes -- save
Copy the code

use

<! <qrcode :url="qrcodeUrl"
        :iconurl="iconurl"
        :wid="298"
        :hei="278"
        :imgwid="100"
        :imghei="100"> </qrcode> // Some js code import qrcode from'vue_qrcodes'/ /... Omit other code components: {qrcode}Copy the code

Here’s the problem: THE QR code appears, but the QR code and logo size is not what you want, can not adapt. That requires us to reset the qr code and logo style.

.logoimg { height: 100px ! important; width: 100px ! important; margin-top: -50px ! important; margin-left: -50px ! important; }#qrcode {margin-top: 20px; img { height: 278px ! important; width: 298px ! important; }}Copy the code

HTML is converted to base64 images

I use the component HTML2Canvas for converting HTML to canvas

yarn add html2canvas
Copy the code
import html2canvas from 'html2canvas'
Copy the code

In order to prevent the page from having a splash screen, I used two divs, one to store the original DOM and one to store the image generated by the canvas, and v-if to control the displayed elements.

htmlToCanvas() {
  html2canvas(this.$refs.bill, {})
  .then((canvas) => {
    let imageUrl = canvas.toDataURL('image/png'); This. canvasImageUrl = imageUrl; this.isDom =false; }); } / / qr code address this. QrcodeUrl = data. The data. The inviteCodeAddress / / HTML into canvas function called enclosing htmlToCanvas ();Copy the code

The result is shown below:

The page is transformed into a picture, but the QR code is not displayed, and the console reports an error:

Except for the two-dimensional code, other parts have been converted into pictures, and the two-dimensional code is not displayed. There are two possible reasons:

  • The TWO-DIMENSIONAL code has not been loaded during the transformation

  • An error was reported in the process of converting the TWO-DIMENSIONAL code

First, we tried nextTick

Use nextTick to defer the callback until after the next DOM update cycle

/ / this qr code address. QrcodeUrl = data. The data. The inviteCodeAddress this.$nextTick(() => {// skip HTML to canvas function this.htmltocanvas (); })Copy the code

I found that the two-dimensional code came out, but the size of the two-dimensional code was wrong, and the console still reported an error. Although the problem is not completely solved, the QR code appears. It can be proved that the two-dimensional code is not displayed because the two-dimensional code has not been loaded during the transformation.

Try setTimeout again

Use setTimeout to delay the callback until after the specified time

/ / this qr code address. QrcodeUrl = data. The data. InviteCodeAddresssetTimeout(()=>{// call HTML to convert canvas function this.htmltoCanvas (); }, 200).Copy the code

View the effect:

Note: setTimeout is the lazy-loading method I can think of so far. Everybody big guy, if this has a better way to solve the above problem, trouble to leave a message, thanks here.

The page is normal, the console does not report an error, but the logo is not displayed.

The logo address is:

iconurl: 'https://static.daojia.com/assets/project/tosimple-pic/LOGO_1576564983633.png'.Copy the code

The project is started locally and there may be cross-domain problems.

htmlToCanvas() {
      html2canvas(this.$refs.bill, {
        useCORS: trueThen ((canvas) => {// Convert canvas to base64 image formatlet imageUrl = canvas.toDataURL('image/png'); 
        this.canvasImageUrl = imageUrl;
        this.isDom = false;
      }).catch((e) => console.log(e));
    }
Copy the code

At this point the HTML has been successfully converted to an image.

Save pictures to mobile phone

First try the js-sdk downloadImage downloadImage

After all kinds of attempts can not be achieved.

Finally, wechat long press to save the picture

The poster part has been transformed into a picture, no need to develop, as long as the user is prompted to save the picture.

Note: if you have a better way to save the picture to the mobile phone album, welcome to leave a message

The last

This paper introduces the implementation process of saving posters to mobile phone photo albums, and there is room for optimization in some links. Welcome your criticism and correction, and make progress together.

Pay attention to our