基于fabric.js和qrcodejs2合成海报图片并转成文件格式

首先需要在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库，有兴趣的可以看看官网的例子