fabric 上传图片并添加到 canvas 中

import { fabric } from 'fabric';
import { Image } from './image';

/**
 * 上传文件
 * 添加到 canvas 中
 */
export class Upload {
    constructor(canvas) {
        // 添加 input
        this.addTarget(canvas);
    }

    /**
     * 添加必要元素
     */
    addTarget(canvas) {
        let ele = `
            <div class="warp">
                <div class="warp-content">点击上传</div>
                <input type="file" id="file"/>
            </div>
            <img src="" alt="" class="img" />
        `;
        $('body').append(ele);
        let _self = this; // 保存当前对象引用
        let file = document.getElementById('file');
        let image = document.getElementsByClassName('img')[0];
        file.onchange = function () {
            // 获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
            let fileData = this.files[0];
            let pettern = /^image/;

            console.info(fileData.type)

            if (!pettern.test(fileData.type)) {
                alert("图片格式不正确");
                return;
            }
            let reader = new FileReader();
            // 异步读取文件内容，结果用data:url的字符串形式表示
            reader.readAsDataURL(fileData);
            /*当读取操作成功完成时调用*/
            reader.onload = function (e) {
                console.log(e); //查看对象
                // 要的数据 这里的this指向FileReader（）对象的实例reader
                console.log(this.result);
                image.setAttribute("src", this.result);
                // 调用绘图
                _self.addToCanvasByUrl(canvas, this.result);
            }
        }
    }

    /**
     * 第一种方法，url
     * 异步加载性能最好
     * url 可以是下载 url， 也可以是 dataUrl (data:image/jpg;base64,...)
     */
    addToCanvasByUrl(canvas, data) {
        new fabric.Image.fromURL(data, (img) => {
            img.set(Image.defaultImage(canvas, img));
            canvas.add(img);
            img.center();
            img.sendBackwards();
        });
    }
}

 

 

上传：https://www.jb51.net/article/228532.htm