将链接转成base64格式生成二维码和把页面生成图片

将链接转成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')
})