Question

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

＆＃13;

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]);     
}

＆＃13;

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

＆＃13;

如您所见，我在Image ()上显示console。我想将此Image转换为jpg文件。

我知道如何获取图片的像素，但将它发送到服务器是完全疯狂的：它已经很大了！

我还尝试访问存储在计算机中的jpg文件，但我没有做任何事情。

我找到的唯一方法就是发送form这样的内容：

<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元素，然后调用下载操作，允许用户选择保存图像的位置。

你提到图像很大，但没有多少 - 请注意，使用画布时，当图像源开始以像素大小触及8k区域时，你也会遇到限制。

一个简化示例（IE将需要toBlob()的polyfill。）：

通过输入
通过URL.createObjectURL()
加载时，创建一个临时画布，设置画布大小=图像大小并绘制图像
使用toBlob()（更高效的内存和性能，无需转码到Base64），以获得Blob。
我们将Blob转换为File（子集对象，它将引用相同的内存），因此我们也可以提供文件名以及（重要的！）二进制文件MIME类型

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

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>

Answer 2

客户端的JavaScript无法保存文件。您有多种选择：

在<canvas>元素上渲染图像。这样就可以通过右键单击保存 - ＆gt;保存图片
将图像插入<img>元素。这样就可以通过右键单击保存 - ＆gt;保存图片
将图像数据作为base64字符串发送到服务器。做那里的处理
使用PHP或Node.js等服务器端语言保存文件

长话短说，你必须使用一些服务器端逻辑将文件保存在磁盘上

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

2 个答案: