这里是我的代码:如何获得网络工作者的图像宽度和高度?
// process-image.js (web-worker)
self.addEventListener('message', ev => {
const {id,file} = ev.data;
const reader = new FileReader();
reader.onload = ev => {
const imageFile = new Image(); // <-- error is here
imageFile.src = ev.target.result;
imageFile.onload =() => {
const fit = makeFit(imageFile);
self.postMessage({
id,
file: {
src: ev.target.result,
width: fit.width,
height: fit.height,
}
})
}
};
reader.readAsDataURL(file);
});
这是在主UI线程工作正常,但显然我没有Image
一个网络工作者的内部访问。具体的错误是:
Uncaught ReferenceError: Image is not defined at FileReader.reader.onload (process-image.js:12)
有没有另一种方式获取图像的宽度和高度?
我想支持尽可能多的文件类型,但是如果有某种类型的库可以执行此操作并且将在网络工作者中运行,那么现在只需要JPG即可。
下面是从UI线程的相关位:
// some-react-component.js
componentDidMount() {
this.worker = new ImageWorker();
this.worker.addEventListener('message', ev => {
const {id, file} = ev.data;
this.setState(({files}) => {
files = files.update(id, img => ({
...img,
...file,
}))
const withWidths = files.filter(f => f.width);
const avgImgWidth = withWidths.reduce((acc, img) => acc + img.width, 0)/withWidths.size;
return {files, avgImgWidth};
});
});
}
onDrop = ev => {
ev.preventDefault();
Array.prototype.forEach.call(ev.dataTransfer.files, file => {
const id = shortid();
this.worker.postMessage({id, file});
const img = {
id,
width: null,
height: null,
src: null,
name: file.name,
}
this.setState(({files}) => ({files: files.set(id, img)}));
});
}
唯一这里值得注意的是,id
只是一个随机UUID,并file
是File
。我将整件事传递给网络工作者,以便我可以在那里完成所有的处理。
Awww yes! 'createImageBitmap'看起来像我正在寻找的。甚至可能帮助调整大小,这是我的下一个任务。请尽快试用,谢谢! – mpen
对不起,复制粘贴真正快速发布答案,将编辑,谢谢! – PiniH