drawimage.js

import React, { Component } from 'react';
import {
    message
} from 'antd';
import { fabric } from "fabric"
import { saveAs } from 'file-saver';
import JSZip from 'jszip';



function dataURLtoBlob(dataurl) {
    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 Blob([u8arr], { type: mime });
}

function setAllCanvas(data, ft, fs, tp, ts) {
    if (data.length == 0) {
        message.warn("暂无设备...");
        return
    }
    message.loading('二维码生成中...');
    let contain = document.createElement("div"), urlArr = [], _it = this;
    contain.setAttribute("id", "contain");
    contain.innerHTML = '';
    data.map((item, i) => {
        let cvs = document.createElement("canvas");
        cvs.id = "canvas" + i;
        contain.appendChild(cvs);
        let contains = document.getElementById("canvas" + i);
        let canvas = new fabric.StaticCanvas(contains, {
            backgroundColor: "white",
            selection: false,
            width: 220,
            height: 378
        }), pos = new fabric.Triangle({
            width: 200, height: 200, left: 10, top: 10
        });


        fabric.Image.fromURL(item.qrCodeUrl, function (oImg) {
            oImg.scale(0.22).set({ left: 10, top: 10 });
            canvas.add(oImg);
            var text1 = new fabric.Textbox(item.equipmentName ? item.equipmentName : "", {
                width: 200,
                left: 10,
                splitByGrapheme: true,
                top: tp ? tp : 260,
                fontSize: ft ? ft : 56,
                textAlign: "center"
            });

            canvas.add(text1);
            var text2 = new fabric.Textbox(item.equipmentNo ? item.equipmentNo : "", {
                width: 200,
                left: 10,
                splitByGrapheme: true,
                top: ts ? ts : 320,
                fontSize: fs ? fs : 36,
                textAlign: "center"
            });
            canvas.add(text2);
            urlArr.push({
                base64: dataURLtoBlob(canvas.toDataURL('png')),
                name: item.equipmentNo && item.equipmentNo + "-" + new Date().getTime() + i
            })
            if (urlArr.length == data.length) {
                let zip = new JSZip();
                message.destroy();
                urlArr.map((item, i) => {
                    zip.file(`${item.name}.png`, item.base64, { base64: true });
                })
                zip.generateAsync({ type: "blob" }).then(function (content) {
                    saveAs(content, "二维码.zip");
                });
            }
        }, { crossOrigin: '*' });
    })
}



export default setAllCanvas;