如何从 blob 加载图像并显示图像预览
我让用户上传封面图片。
我正在使用 ant design 图片上传。因此它默认提供了 UI 和裁剪图像的功能。
onst [fileList, setFileList] = useState([]);
const onPreview = async (file) => {
let src = file.url;
if (!src) {
src = await new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file.originFileObj);
reader.onload = () => resolve(reader.result);
});
}
const image = new Image();
image.src = src;
const imgWindow = window.open(src);
imgWindow.document.write(image.outerHTML);
};
return (
<div>
<UploadButton
fileList={fileList}
beforeUpload={() => false}
onChange={onChange}
onPreview={onPreview} aspect={2} listType="picture" />
<div/>
)
裁剪完成后，在到达服务器之前，我想让用户能够预览图像，以便他们可以在上传之前进行确认。
成功上传图像后，我访问了缩略图 URL 来向用户显示。它是模糊和扭曲的。
因此，我继续检查网络部分，发现了如图所示的斑点，这为我提供了可以在产品中显示的高质量图像。
我是编程新手。我想知道如何访问它。
I'm letting users upload a cover image.
I'm using ant design image upload. So it provides UI and the ability to crop images by default.
onst [fileList, setFileList] = useState([]);
const onPreview = async (file) => {
let src = file.url;
if (!src) {
src = await new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file.originFileObj);
reader.onload = () => resolve(reader.result);
});
}
const image = new Image();
image.src = src;
const imgWindow = window.open(src);
imgWindow.document.write(image.outerHTML);
};
return (
<div>
<UploadButton
fileList={fileList}
beforeUpload={() => false}
onChange={onChange}
onPreview={onPreview} aspect={2} listType="picture" />
<div/>
)
Once the cropping is done, before reaching the server, I want to give users the ability to preview the imageso they can confirm it before upload.
On successfully, uploading the image, I accessed the thumb URL to show users. It's blurry and distorted.
So I went on check the network section and I found the blob as shown in Image, which gives me a quality image that I can show in the product.
I'm new to programming. I was wondering, how to access it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以从 blob 对象创建临时图像 url。
You can create a temporary image url out of a blob object.