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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据