vue 合成图片
目的:将二维码图片和背景图片合成变成一张图片
方法一:
引入依赖
cnpm install qrcanvas --save
cnpm install html2canvas --save
具体代码:
<!-- 分享图片生成 --> <template> <div class="container"> <div class="share-img"> <img :src="imgUrl" alt="分享图"> </div> <div class="creat-img" ref="box"> <img src="../assets/images/activity/txvip.jpeg" alt="分享背景图"> <div id="qrcode" class="qrcode"></div> </div> </div> </template> <script> import { qrcanvas } from 'qrcanvas'; import html2canvas from 'html2canvas'; export default { data () { return { imgUrl:'', } }, watch:{ imgUrl(val,oldval){ //监听到imgUrl有变化以后 说明新图片已经生成 隐藏DOM this.$refs.box.style.display = "none"; } }, created() { let that = this; that.$nextTick(function () { //生成二维码 var canvas1 = qrcanvas({ data: decodeURIComponent(that.$route.query.url), size:128 }); document.getElementById("qrcode").innerHTML = ''; document.getElementById('qrcode').appendChild(canvas1); //合成分享图 that.$indicator.open({ text: '正在生成图片...', spinnerType: 'fading-circle' }); html2canvas(that.$refs.box).then(function(canvas) { that.imgUrl = URL.createObjectURL(that.base64ToBlob(canvas.toDataURL())) setTimeout(()=>{ that.$indicator.close(); that.$toast({ message: '图片已生成,长按保存分享给你的好友吧', position: 'middle', duration: 3000 }); },2000) }); }) }, methods: { //base64转blob base64ToBlob(code) { let parts = code.split(';base64,'); let contentType = parts[0].split(':')[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); }, } } </script> <style lang='scss' scoped> .creat-img{ img{ z-index: 3; } .qrcode{ position: absolute; bottom: .15rem; left: 50%; margin-left: -64px; z-index: 5; } } </style>
方法二:
html:
<template> <div class="container"> <div id="imgBox" align="center"> </div> </div> </template>
js:
var qr_div = document.getElementById('qr_code').children[0]; var data = ['http://cdnzzz.vcgeek.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190118153442.jpg', '' + qr_div.src]; var base64 = []; var c = document.createElement('canvas'), ctx = c.getContext('2d'), len = data.length; c.width = 750; c.height = 1334; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff'; ctx.fill(); drawing(0); function drawing(n) { if(n < len) { var img = new Image; img.crossOrigin = 'anonymous'; //解决跨域 img.src = data[n]; img.setAttribute("crossOrigin", 'Anonymous'); img.onload = function() { if(n == 1) { ctx.drawImage(img, 55, 1015, 200, 200); //121和129表示二维码距离背景图片左上角的X轴,Y轴,160表示生成的图片中二维码的大小 } else { ctx.drawImage(img, 0, 0, c.width, c.height); } drawing(n + 1); //递归 } } else { console.log(c) try { //保存生成作品图片 base64.push(c.toDataURL("image/png",1)); //通过canvas.toDataURL转成base64. document.getElementById('imgBox').innerHTML = '<img style="width:100%" class="invite_qrImg" src="' + base64[0] + '">'; // alert(base64[0].length) } catch(e) { //TODO handle the exception console.log(alert(e)) } } }
html合成图片:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Html5 Canvas 实现图片合成</title> <style> body{ text-align: center; } img { border: solid 1px #ddd; } </style> </head> <body> <div align="center" style="display: none;"> <img src="./qr.png">
<img src="./qr.png">
</div> <input type="button" value="一键合成" onclick="hecheng()"> <a href="" download id="downloadPic">下载合成图</a> <div id="imgBox" align="center"> </div> <script> function hecheng() { draw(function() { document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">'; document.getElementById('downloadPic').href = base64[0]; }) } var data = ['qr.png', ''], base64 = []; function draw(fn) { var c = document.createElement('canvas'), ctx = c.getContext('2d'), len = data.length; console.log(data.length) c.width = 400; c.height = 800; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff'; ctx.fill(); function drawing(n) { if(n < len) { var img = new Image; //img.crossOrigin = 'Anonymous'; //解决跨域 img.src = data[n]; img.onload = function() { if(n == 1) { ctx.drawImage(img, 100, 100, 160, 160); //121和129表示二维码距离背景图片左上角的X轴,Y轴,160表示生成的图片中二维码的大小 } else { ctx.drawImage(img, 0, 0, c.width, c.height); } drawing(n + 1); //递归 } } else { //保存生成作品图片 base64.push(c.toDataURL()); //通过canvas.toDataURL转成base64. //alert(JSON.stringify(base64)); fn(); } } drawing(0); } </script> </body> </html>