javascript - JS-将Image对象转换为jpeg文件

Question

所以，我有一个用于上传图片的用户输入。这是一个简单的例子:

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            console.log (img);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

<input type="file" onchange="handleImage(event)"><br>

如您所见，我在控制台上显示了一个Image ()。我想将此 Image 转换为 jpg 文件。

我知道如何获取图片的像素，但将其发送到服务器完全是疯狂的:它太大了!

我也尝试访问存储在计算机中的jpg文件，但没有取得任何成果。

我发现的唯一方法是使用表单发送它，如下所示:

<form action="anything.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
</form>   

在 PHP 中:

$_FILES["fileToUpload"]["tmp_name"]

为什么不用 JS 呢？

我的最终目标是使用 AJAX 发送 jpg 文件。

如果您有任何疑问，请告诉我。

Answer 1

最简单的方法是使用 Canvas 元素，然后调用下载操作，允许用户选择保存图像的位置。

您提到图像很大，但没有提到多大 - 请注意，使用 Canvas ，当图像源开始接触像素大小的 8k 区域时，您也会遇到限制。

一个简化的示例(IE 将需要 toBlob() 的填充):

• 通过输入加载图像源
• 通过URL.createObjectURL()直接使用文件blob作为图像源
• 加载后，创建一个临时 Canvas ，设置 Canvas 大小=图像大小并在图像中绘制
• 使用 toBlob()(内存和性能更高效，并且不需要与 Base64 进行转码)来获取 Blob。
• 我们将把Blob转换为File(一个子集对象，它将引用相同的内存)，这样我们也可以给出一个文件名(重要! ) 一个二进制 mime 类型。

由于最后一步的 mime 类型是二进制，浏览器将调用“另存为”对话框。

document.querySelector("input").onchange = function() {
  var img = new Image;
  img.onload = convert;
  img.src = URL.createObjectURL(this.files[0]);
};

function convert() {
  URL.revokeObjectURL(this.src);             // free up memory
  var c = document.createElement("canvas"),  // create a temp. canvas
      ctx = c.getContext("2d");
  c.width = this.width;                      // set size = image, draw
  c.height = this.height;
  ctx.drawImage(this, 0, 0);
  
  // convert to File object, NOTE: we're using binary mime-type for the final Blob/File
  c.toBlob(function(blob) {
    var file = new File([blob], "MyJPEG.jpg", {type: "application/octet-stream"});
    window.location = URL.createObjectURL(file);
  }, "image/jpeg", 0.75);  // mime=JPEG, quality=0.75
}

// NOTE: toBlob() is not supported in IE, use a polyfill for IE.

<label>Select image to convert: <input type=file></label>

更新:如果您只是想要新创建的 JPEG 的字符串(base-64 编码)版本，只需使用 toDataURL() 而不是 toBlob():

document.querySelector("input").onchange = function() {
  var img = new Image;
  img.onload = convert;
  img.src = URL.createObjectURL(this.files[0]);
};

function convert() {
  URL.revokeObjectURL(this.src);             // free up memory
  var c = document.createElement("canvas"),  // create a temp. canvas
      ctx = c.getContext("2d");
  c.width = this.width;                      // set size = image, draw
  c.height = this.height;
  ctx.drawImage(this, 0, 0);
  
  // convert to File object, NOTE: we're using binary mime-type for the final Blob/File
  var jpeg = c.toDataURL("image/jpeg", 0.75);  // mime=JPEG, quality=0.75
  console.log(jpeg.length)
}

<label>Select image to convert: <input type=file></label>