前面我们已经创建了一个画布，接下来我们来实现画布里面的具体功能。
本地上传
我们来分析本地上传的功能，不考虑后端存储，其实本地上传就本地应用来说主要分为两部分，以图片为例：
- 本地图片上传
- 画布渲染上传的图片
首先我们来实现本地图片上传，此处可以直接使用element-ui的el-upload组件来实现本地文件的上传,只需在原有上传的时候进行拦截获取就行
<el-upload
v-model:file-list="fileList"
class="upload-demo"
multiple
:limit="100"
:before-upload="handleUpload"
:show-file-list="false"
>
<el-button type="primary">本地上传</el-button>
</el-upload>
/**
* 上传时触发回调
*
* @param {Object} rawFile file对象的上传数据
* @return {boolean} 是否终止后续操作
*/
const handleUpload = (rawFile) => {
// 此处暂时不用关注，重点是获取到上传的图片数据
stage.addImg(file);
return false;
};
上面我们获取到了要上传的图片数据，接下来我们将获取到的图片资源渲染到我们画布上
fabricjs中我们要把画布渲染到画布上有两种方法：
// 同步加载
fabric.Image
// 异步加载
fabric.Image.fromURL
介于我们目前已经拿到本地上传的file文件，同时本地环境下因为没有后端存储又受浏览器限制获取不到本地文件有效的url地址，所以此处加载图片我们选择同步加载
另一方面因为我们此时拿到的是file文件，所以我们首先需要做的是怎么把file文件转换为image对象
image对象很好获取，new Image()然后加载一下对应的图片就可以获取到，但image对象怎么加载file文件呢？
此处我们需要了解一个api FileReader对象, 使用FileReader我们可以读取file文件
/**
* 画布添加元素，渲染图片
*
* @param {object} file 待上传的file数据
*/
addImg(file) {
// 读取图片数据
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = (e) => {
const imgobj = new Image();
imgobj.onload = () => {
// 画布加载、渲染
fabric.Image.fromObject(imgobj, (obj) => {
// 调用前面创建画布存储的canvas对象加载image
this.canvas.add(obj);
});
};
imgobj.src = e.target.result;
};
}
