SoFunction
Updated on 2025-04-04

Vue uses html2canvas to capture and save images

Introduction to html2canvas

html2canvas is a JavaScript library that converts HTML elements into Canvas elements. Specifically, it can convert an entire page or a specific HTML element into an image, which is very useful for creating screenshots, generating PDF files, or creating editable images on it.

html2canvas installation

Installing html2canvas is very simple, just one simple command is required.

npm install html2canvas --save

Just wait for the command to be executed.

html2canvas

It is also very convenient to use. First introduce it where you need to use it.

import html2canvas from 'html2canvas'

Use html2canvas in Vue components to convert HTML elements to canvas:

methods: {  
  convertToCanvas() {  
    const element = this.$ // Get the HTML element to be converted    html2canvas(element).then(canvas => {  
      // Here you can operate on canvas, such as adding it to a page or saving it as an image, etc.      // For example: this.$(canvas)    })  
  }  
}

Add a reference to the HTML element to convert and a method to call in the template:

<template>  
  <div>  
    <div ref="element">To be convertedHTMLelement</div>  
    <button @click="convertToCanvas">Convert toCanvas</button>  
    <div ref="canvasContainer"></div>  
  </div>  
</template>

When the user clicks the button, the convertToCanvas method will be called, which will get the HTML element to be converted and convert it to canvas using html2canvas. After the conversion is complete, you can operate on the canvas in the then callback function, such as adding it to the page or saving it as an image, etc.

Case: Save thumbnails

I have written a function in the project before, which is to save the page as a thumbnail to display. You need to get a screenshot of this page, and then send the screenshot data to the backend, and save the backend, and then when querying the list, the backend returns the saved thumbnail for display. It is to quote the above steps:

    // Get screenshot    getPicture() {
      html2canvas(this.$).then(canvas => {
        // Get the url of the generated image and set it to png format        const imgUrl = ("images/png");
        let base64Data = (",")[1];
        let binaryData = atob(base64Data);
        let uint8Array = new Uint8Array();
        for (let i = 0; i < ; i++) {
          uint8Array[i] = (i);
        }
        // Get blob file stream        let blob = new Blob([uint8Array], { type: "image/png" });
        // File transfer file        let file = new File([blob], "", {
          type: "image/png",
        });
        let fd = new FormData()
        ('file', file)
        
        // Request backend data interface        coverUpload(fd) 
      })
    },

After obtaining the screenshot above, it will be OK to call the method of requesting the interface.

This way you can take the screenshot of the page and save the thumbnail to the backend. But in actual use, I found a big problem, that is, the network images I quoted cannot be captured and intercepted. So I found the reason: it was because of the cross-domain problem that I felt it was unsafe, so I didn’t intercept it.

It is also very simple to solve this problem. Configure the cross-domain and change the above code:

    // Get screenshot    getPicture(id) {
      html2canvas(this.$, {
        useCORS: true,  // Turn on cross-domain      }).then(canvas => {
        // Get the url of the generated image and set it to png format        const imgUrl = ("images/png");
        let base64Data = (",")[1];
        let binaryData = atob(base64Data);
        let uint8Array = new Uint8Array();
        for (let i = 0; i < ; i++) {
          uint8Array[i] = (i);
        }
        // Get blob file stream        let blob = new Blob([uint8Array], { type: "image/png" });
        // File transfer file        let file = new File([blob], "", {
          type: "image/png",
        });
        let fd = new FormData()
        ('file', file)
        // Request backend data interface        coverUpload(id, fd)
      })
    },

The main thing is this code:useCORS: true。

But I found that some of them are not working. Why? Because it needs to enable cross-domain on the server("Access-Control-Allow-Origin","*") ;. If it is your own server, then just change the proxy configuration of nginx.

location /imgSource/ {
	# Just add these three lines	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers X-Requested-With;
	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
	
	autoindex on;
	alias C:/Users/11466/Desktop/serve/classe/image/;
}

This way I can intercept it, anyway, I succeeded.

This is the article about Vue using html2canvas to capture and save pictures. For more relevant content on screenshots of Vue html2canvas, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!