我正在构建一个小型的浏览器内图像转换工具——拖入一个 PNG 或 JPEG 文件，即可得到 WebP 或 AVIF 格式的文件，全程无需服务器参与——却遇到了一种看起来根本不像失败的失败模式。转换“成功”了。下载也正常。但文件并不是你所要求的格式，除非你特意检查，否则你永远不会知道。
问题的本质
在客户端执行此操作的全部意义在于，图像永远不会离开浏览器。没有上传，没有服务器往返，没有队列。处理流程很短：
const loadBitmap = async (file: File) => {
if ('createImageBitmap' in window) return createImageBitmap(file);
return new Promise<HTMLImageElement>((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.src = URL.createObjectURL(file);
});
};
createImageBitmap(file) 是快速路径——它在主线程之外解码文件，而无需你先连接一个 <img> 元素。不过，并非所有环境都支持它，因此有一个回退方案，即使用经典的 new Image() 加上 URL.createObjectURL，这种方法在任何地方都有效，但在解码期间会占用主线程。
一旦你获得了位图，就将其绘制到画布中——可以选择缩小尺寸——然后请求画布生成目标格式的 blob 数据：
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height 免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
