Example of method to convert vue image to base64 format

Way

The value obtained by introducing the required method of image in vue can directly generate base64 format, but this method is only suitable for pictures with a size of less than 5kb.

const path = require('@/assets/images/')

()

What is the image type passed in by this method (`image/${ext}`)? What is the generated base64 data prefix? If the type passed in is different from the generated type, it means that the method does not support the image of this type. For example, the gif image is converted into a png

imgUrlToBase64(url) {
      return new Promise((resolve, reject) =&gt; {
        if (!url) {
          reject('Please pass in the url content')
        }
        if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) {
          // Image address          const image = new Image()
          // Set up cross-domain issues          ('crossOrigin', 'anonymous')
          // Image address           = url
           = () =&gt; {
            const canvas = ('canvas')
            const ctx = ('2d')
             = 
             = 
            (image, 0, 0, , )
            // Get the image suffix            const ext = (('.') + 1).toLowerCase()
            // Turn to base64            const dataUrl = (`image/${ext}`)
            resolve(dataUrl || '')
          }
        } else {
          // Non-picture address          reject('No(png/jpe?g/gif/svgwait)Image address');
        }
      })
    },

()

getBase64(imgUrl) {
      return new Promise((resolve, reject) =&gt; {
        if (!imgUrl) {
          reject('Please pass in imgUrl content')
        }
        if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(imgUrl)) {
           =  || 
          var xhr = new XMLHttpRequest()
          ('get', imgUrl, true)
           = 'blob'
           = function() {
            if ( == 200) {
              // Get a blob object              var blob = 
              const oFileReader = new FileReader()
               = function(e) {
                const base64 = 
                resolve(base64 || '')
              }
              (blob)
            }
          }
          ()
        } else {
          // Non-picture address          reject('No(png/jpe?g/gif/svgwait)Image address')
        }
      })
    },

Summarize

This is the article about vue image to base64 format. For more related vue image to base64 format, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!