使用画布将文件输入到 blob答案

【问题标题】：file input to blob using canvas使用画布将文件输入到 blob
【发布时间】：2020-04-29 06:17:18
【问题描述】：

无法将 blob 插入 indexedDB 请协助将 blob 从文件插入 indexedDB :)

代码

    <html>
      <head>
        <title>file to BLOB</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      </head>
    <body>
      <div id="test">
        <input id="File" type="file" accept="image/*" capture="user">
      </div>
    </body>
    </html>
<script src="js/idbConn.js"></script>

Javascript

<script>
    $(document).ready(function(){
      $("#File").change(function(){
      const File = this.files[0];
      const cvs = document.createElement("canvas");
      const optBlob = cvs.toBlob(function(cvsBlob){
        let fileURL = URL.createObjectURL(File);
        let imgFile = new Image();
        let imgFile.src = fileURL;
        imgFile.onload = function(){
          cvs.width = imgFile.naturalWidth;
          cvs.height = imgFile.naturalHeight;
          let ctx = cvs.getContext("2d").drawImage(imgFile,0,0);
          URL.revokeObjectURL(fileURL);
        }
      },File.type,0.3);
      const data = new Object();
      data.blob = optBlob;
      let trx = db.transaction(["imgBlobs"],"readwrite").objectStore("imgBlobs").put(data,"test.jpeg");
      });
    });
</script>

试图直接将文件插入 indexedDB 但 blob 未定义

如果将 cvsBlob 保存在 data.blob 中，则空白图像存储在 indexedDB 中

【问题讨论】：

你在this.files[0];得到的File对象已经是一个Blob（文件接口继承自Blob），不需要在画布上绘制你的图像。
优化 blob 我要使用 canvas.toBlob()
“优化 blob”？ Blob 只是指向内存中二进制数据的指针，无法对其进行优化或反优化。如果您的意思是优化的图像文件，那么我真的想知道您期望什么样的优化。对于文件大小，HTMLCanvas png 压缩是市场上最差的。如果您曾经收到 jpeg 图像，您会破坏它们的尺寸。对于绘制性能，由于它们无论如何都会被解码为原始位图，因此绘制它们甚至不会更快......

标签： javascript html image-processing canvas

【解决方案1】：

有一些问题。

HTMLCanvasElement.toBlob 不返回任何内容。您会在回调函数中获得 blob。
JavaScript 处于阻塞状态，队列任务（如toBlob 回调）事件（如onload）在当前执行返回之前不会运行。这意味着该行 const data = new Object(); 在调用 toBlob 回调之前运行。
您在创建、加载图像并将其绘制到画布之前调用了toBlob。
let imgFile.src = fileURL;这行会抛出语法错误？？

修复

首先加载图片。
加载图像时创建画布并在其上绘制图像。
撤消图片网址。
将画布转换为 blob。
在 toBlob 回调中将 blob 添加到数据库。

示例

使用从文件输入中获得的文件调用函数。比如$("#File").change(function() { saveImageToDB(this.files[0]) });

function saveImageToDB(file) {
    const fileURL = URL.createObjectURL(file);
    const img = new Image();
    img.src = fileURL;
    img.addEventListener("load", () => {
        URL.revokeObjectURL(fileURL);
        const cvs = document.createElement("canvas");
        cvs.width = img.naturalWidth;
        cvs.height = img.naturalHeight;
        cvs.getContext("2d").drawImage(img, 0, 0);
        cvs.toBlob(blob => {
            // Code to add blob to database. Put your db code in here
            db.transaction(["img"], "write").objectStore("imgs").put({blob}, file.name);
        }, File.type, 0.3);
    }, {once: true});
}

【讨论】：

非常感谢