将链接转成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')
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值