img加载本地图片_FabricJs项目【简易画板】--本地图片

知乎视频​www.zhihu.com

fabricjs 相关代码

<button @click="imgDraw()" class="imgDrawBtn">本地图片</button>
<input type="file" accept="image/*" style="display:none" id="uploadfile" @change="uploadFile" />

imgDraw(){
    document.getElementById("uploadfile").click();
},
uploadFile(e){
    this.canvas.isDrawingMode = false;
    this.removeTextObject();
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = (e) => {
    var data = e.target.result;                    
    fabric.Image.fromURL(data, (img) => { 
        this.canvas.add(img).renderAll();
    });
    };
    reader.readAsDataURL(file);
    e.target.value='';
},

注意的点

第二次加载本地图片的时候如果和第一张相同，那是不会触发onchange那个方法的，所以我们需要把上一个值设为空

参考

1. 官网地址
2. github 项目地址