所以,我有一个用户输入,用于上传图片。这是一个简单的例子:
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 ()
上展示了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文件。
如果您有疑问,请告诉我。
最简单的方法是使用canvas元素,然后调用下载操作,允许用户选择保存图像的位置。
你提到图像很大,但没有多少 - 请注意,当图像源开始以像素大小触摸8k区域时,使用画布时也会遇到限制。
一个简化的例子(IE将要求toBlob()
的polyfill):
URL.createObjectURL()
直接使用File blob作为图像源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>
客户端的JavaScript无法保存文件。您有多种选择:
<canvas>
元素上渲染图像。这样就可以通过右键单击保存 - >保存图像<img>
元素。这样就可以通过右键单击保存 - >保存图像简而言之,您必须使用一些服务器端逻辑将文件保存在磁盘上