首先须要在template中写入这两个元素
canvas(id="canvas")div(id='qrcode')引入上传阿里云用的js、fabric.js、qrcodejs2
import { upload } from '~/static/js/upload.js';import { fabric } from 'fabric';import QRCode from 'qrcodejs2';const QRCode = require('qrcodejs2');//这两种形式都能够引入 qrcodejs2在nuxt中间接引入会报错。须要判断为浏览器环境之后用require引入而后就是合成图片
async groupImg() {return new Promise((resolve, reject) => {try {// 创建对象var img = new Image();// 扭转图片的src（这个图片地址是底图）img.src = '图片地址';//加载实现执行img.onload = () => {// 打印console.log('-----开始合成图片');const imgW = img.width;const imgH = img.height;const canvas = new fabric.Canvas('canvas');canvas.setWidth(imgW);canvas.setHeight(imgH); //设置canvas宽高为底图宽高，保障最初合成的图片是底图的尺寸 canvas.skipTargetFind = true; //整个画板元素不能被选中const qrCodeUrl = '二维码地址'const qrcode = new QRCode(document.getElementById('qrcode'), { width: 240, height: 240, colorDark: '#000000', colorLight: '#ffffff', correctLevel: 0 //容错率 最好是调为0，要不然生成的二维码会很密});qrcode.makeCode(qrCodeUrl); // make another code.//合成完之后立刻获取二维码的url可能会获取不到，得加个延时器console.log('qrcode', qrcode);fabric.Image.fromURL( 底图url, img => { var img1 = img.set({ left: 0, top: 0 }); fabric.Image.fromURL( 头像图片url, img => { var img2 = img.scale(0.6).set({ left: 6.7, //头像地位 top: 20, clipPath: new fabric.Circle({ radius: 50, //圆形 originX: 'center', originY: 'center' }) }); fabric.Image.fromURL( document.getElementById('qrcode').querySelector('canvas').toDataURL('image/png'), async img => { var img3 = img.scale(1).set({ left: 105, top: 423 }); //合并图片 canvas.add( new fabric.Group([img1, img2, img3], { left: 0, top: 0 }) ); const name = `.png`; //canvas.toDataURL()这个办法是将canvas转换成base64 // dataURLtoFile()这个办法是将bsae64转成文件流 const file = this.dataURLtoFile( canvas.toDataURL('image/png'), name ); console.log('file', file); let config = { typeName: 'png', type: 'img' }; //这里就开始上传文件了 const sharImageUrl = await upload(this, file, config); console.log( '---------------sharImageUrl', sharImageUrl ); resolve(sharImageUrl); }, { crossOrigin: 'anonymous' } ); }, { crossOrigin: 'anonymous' } ); }, { crossOrigin: 'anonymous' });};} catch (error) { console.error(error); reject(error); } }); },bsae64转文件的办法
dataURLtoFile(dataurl, filename) { //将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png） var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); }有不妥之处欢送大家指出~
fabric.js是能够简化canvas编写的js库，提供canvas短少的对象模型，蕴含事件监听、动画、数据序列号和反序列化等高级性能的js库，有趣味的能够看看官网的例子