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