基于fabricjs和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 库，有趣味的能够看看官网的例子