画布 多张图片合成二维码推广图
本最开始使用的是引用的 "html2canvas" ,但tm调来跳去各种问题。
最后直接换成画布操作 ,我这里是采用的VUE
注意事项:图片链接和网站 http 协议一致,如果网站是http就图片链接开头就用http,若是s就用s ,否则将失败。我其实猜测 html2canvas 没有成功的原因可能也可能是这个原因,具体还要去试验
废话不多说上完整代码
<template> <div> <div class="tuiguanghead" @click="backTo"> <div > <van-icon name="arrow-left" /> </div> </div> <img id="bg" v-show="!makePic" :src="bgPic" alt srcset /> <img id="code" v-show="!makePic" :src="materialUrl" alt srcset /> <div> <img v-show="makePic" :src="makePic" alt srcset /> </div> <div> </div> </div> </template> <script> export default { data () { return { bgPic: require('@/assets/images/hytg.jpg'), materialUrl: '',//require('@/assets/images/dizhi.png'), makePic: '' } }, created () { this.getdata(); }, mounted () { setTimeout(() => { this.drawProdPicture(); }, 1000); }, methods: { backTo () { if (this.back) { this.$router.push(this.back) } else { this.$router.back(-1) } }, getdata () { var that = this; this.$get('/user/Extension_qrcode', { }).then(res => { if (res.code === 200) { that.materialUrl = res.data.url } }) }, drawProdPicture () { let img1 = new Image() img1.src = this.bgPic var bg = document.getElementById("bg").getBoundingClientRect(); img1.width = bg.width img1.height = bg.height img1.setAttribute('crossOrigin', 'anonymous') let canvas = document.createElement("canvas") let context = canvas.getContext("2d") canvas.width = img1.width canvas.height = img1.height let img2 = new Image() let flag = true var code = document.getElementById("code").getBoundingClientRect(); // 将 img1 加入画布 img1.onload = () => { context.drawImage(img1, 0, 0, bg.width,bg.height) img2.src = this.materialUrl img2.setAttribute('crossOrigin', 'anonymous') img2.width = code.width img2.height = code.height if (flag) { flag = false } else { let src = canvas.toDataURL() this.makePic = src } } var right = document.body.clientWidth-(document.body.clientWidth*0.67) var top = document.body.clientHeight-(document.body.clientHeight*0.49) // 将 img2 加入画布 img2.onload = () => { context.drawImage(img2, right, top, code.width, code.height) if (flag) { flag = false } else { let src = canvas.toDataURL('image/png') this.makePic = src } } } } } </script> <style lang="scss" scoped> .tuiguanghead { z-index: 2; padding-left: 0.3rem; padding-top: 0.3rem; position: fixed; div { display: flex; justify-content: center; align-items: center; width: 0.6rem; height: 0.6rem; border-radius: 50%; background-color: rgba(0, 0, 5, 0.3); i { font-size: 0.32rem; color: #f5f5f5; } } } #bg{ width: 100%; height: 100%; } #code{ position: absolute; bottom: 4rem; left: 2.5rem; width: 2.4rem; } </style>