將連結轉成base64格式

function getUrlBase64 (url, etx, callback) {
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    var img = new Image()
    img.src = url
    img.crossOrigin = 'Anonymous'
    img.onload = function () {
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0
 
, 0)
        var dataUrl = canvas.toDataURL('image/' + etx)
        callback.call(this, dataUrl)
        canvas = null
    }
}

使用：

  getUrlBase64('./default.png', 'png', function (base64) {
    console.log(base64)
  })

注意：本地是不可以的 需要起一個服務 用http-server就可以 注意可能有跨域問題

生成二維碼

這裡用的是一個外掛qrcode   cnpm i qrcode --save
 

html部分
 <canvas id="canvas" style="display:none"></canvas>
 js:
 import QRCode from 'qrcode'
 function createQrcode () {
    var that = this
    var url = location.href
    QRCode.toCanvas(canvas, url, function (err) {
        if(!err) {
            // 證明生成了二維碼（canvas） 然後把二維碼轉為圖片
            console.log(canvas.toDataURL('image/png'
 
))
        }
    })
}

頁面或者部分割槽域生成為一張圖

用到了html2canvas  cnpm i html2canvas --save

js:
import html2canvas from 'html2canvas'

html2canvas((document.getElementById('share')).then((canvas) => {
    var img = canvas.toDataRUL('image/png')
})