TL; DR;
有没有办法在上传之前直接在浏览器端压缩图像(主要是jpeg,png和gif)?我很确定JavaScript可以做到这一点,但我找不到实现它的方法。
这是我想要实现的完整场景:
input type="file"
元素选择图片直到最后一步的完整过程应该在客户端完成,并且应该在最新的Chrome和Firefox,Safari 5+和 IE 8 + 上兼容。如果可能的话,只应该使用JavaScript(但我很确定这是不可能的)。
我现在没有编写任何代码,但我已经考虑过了。可以通过File API在本地阅读文件,可以使用Canvas元素完成图像预览和编辑,但我找不到使用图片压缩部分的方法。< / p>
根据html5please.com和caniuse.com,支持这些浏览器非常困难(感谢IE),但可以使用填充程序来完成,例如FlashCanvas和FileReader。< / p>
实际上,目标是减小文件大小,因此我将图像压缩视为一种解决方案。但是,我知道上传的图像将在我的网站上显示,每次都在同一个地方,我知道这个显示区域的尺寸(例如200x400)。因此,我可以调整图像大小以适应这些尺寸,从而减小文件大小。我不知道这种技术的压缩率是多少。
你怎么看?你有什么建议告诉我吗?你知道在JavaScript中压缩浏览器图像的方法吗?谢谢你的回复。答案 0 :(得分:115)
简而言之:
来源:code。
答案 1 :(得分:11)
@ PsychoWoods&#39;答案很好。我想提供自己的解决方案。此Javascript函数获取图像数据URL和宽度,将其缩放到新宽度,并返回新的数据URL。
// Take an image URL, downscale it to the given width, and return a new image URL.
function downscaleImage(dataUrl, newWidth, imageType, imageArguments) {
"use strict";
var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl;
// Provide default values
imageType = imageType || "image/jpeg";
imageArguments = imageArguments || 0.7;
// Create a temporary image so that we can compute the height of the downscaled image.
image = new Image();
image.src = dataUrl;
oldWidth = image.width;
oldHeight = image.height;
newHeight = Math.floor(oldHeight / oldWidth * newWidth)
// Create a temporary canvas to draw the downscaled image on.
canvas = document.createElement("canvas");
canvas.width = newWidth;
canvas.height = newHeight;
// Draw the downscaled image on the canvas and return the new data URL.
ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, newWidth, newHeight);
newDataUrl = canvas.toDataURL(imageType, imageArguments);
return newDataUrl;
}
此代码可用于任何有数据URL的地方,并且需要缩小图像的数据网址。
答案 2 :(得分:9)
我看到其他答案中缺少两件事:
canvas.toBlob
(可用时)比canvas.toDataURL
更高效,也是异步。以下脚本处理这两点:
// From https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob, needed for Safari:
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function(callback, type, quality) {
var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}
window.URL = window.URL || window.webkitURL;
// Modified from https://stackoverflow.com/a/32490603, cc by-sa 3.0
// -2 = not jpeg, -1 = no data, 1..8 = orientations
function getExifOrientation(file, callback) {
// Suggestion from http://code.flickr.net/2012/06/01/parsing-exif-client-side-using-javascript-2/:
if (file.slice) {
file = file.slice(0, 131072);
} else if (file.webkitSlice) {
file = file.webkitSlice(0, 131072);
}
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) {
callback(-2);
return;
}
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
callback(-1);
return;
}
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112) {
callback(view.getUint16(offset + (i * 12) + 8, little));
return;
}
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
callback(-1);
};
reader.readAsArrayBuffer(file);
}
// Derived from https://stackoverflow.com/a/40867559, cc by-sa
function imgToCanvasWithOrientation(img, rawWidth, rawHeight, orientation) {
var canvas = document.createElement('canvas');
if (orientation > 4) {
canvas.width = rawHeight;
canvas.height = rawWidth;
} else {
canvas.width = rawWidth;
canvas.height = rawHeight;
}
if (orientation > 1) {
console.log("EXIF orientation = " + orientation + ", rotating picture");
}
var ctx = canvas.getContext('2d');
switch (orientation) {
case 2: ctx.transform(-1, 0, 0, 1, rawWidth, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, rawWidth, rawHeight); break;
case 4: ctx.transform(1, 0, 0, -1, 0, rawHeight); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, rawHeight, 0); break;
case 7: ctx.transform(0, -1, -1, 0, rawHeight, rawWidth); break;
case 8: ctx.transform(0, -1, 1, 0, 0, rawWidth); break;
}
ctx.drawImage(img, 0, 0, rawWidth, rawHeight);
return canvas;
}
function reduceFileSize(file, acceptFileSize, maxWidth, maxHeight, quality, callback) {
if (file.size <= acceptFileSize) {
callback(file);
return;
}
var img = new Image();
img.onerror = function() {
URL.revokeObjectURL(this.src);
callback(file);
};
img.onload = function() {
URL.revokeObjectURL(this.src);
getExifOrientation(file, function(orientation) {
var w = img.width, h = img.height;
var scale = (orientation > 4 ?
Math.min(maxHeight / w, maxWidth / h, 1) :
Math.min(maxWidth / w, maxHeight / h, 1));
h = Math.round(h * scale);
w = Math.round(w * scale);
var canvas = imgToCanvasWithOrientation(img, w, h, orientation);
canvas.toBlob(function(blob) {
console.log("Resized image to " + w + "x" + h + ", " + (blob.size >> 10) + "kB");
callback(blob);
}, 'image/jpeg', quality);
});
};
img.src = URL.createObjectURL(file);
}
使用示例:
inputfile.onchange = function() {
// If file size > 500kB, resize such that width <= 1000, quality = 0.9
reduceFileSize(this.files[0], 500*1024, 1000, Infinity, 0.9, blob => {
let body = new FormData();
body.set('file', blob, blob.name || "file.jpg");
fetch('/upload-image', {method: 'POST', body}).then(...);
});
};
答案 3 :(得分:3)
编辑:根据Mr Me对此答案的评论,看起来压缩现在可用于JPG / WebP格式(请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)。
据我所知,你无法使用画布压缩图像,相反,你可以调整它的大小。使用canvas.toDataURL不会让您选择要使用的压缩率。您可以查看完全符合您要求的canimage:https://github.com/nfroidure/CanImage/blob/master/chrome/canimage/content/canimage.js
实际上,通常只需调整图像大小以减小其大小即可,但如果您想进一步使用,则必须使用新引入的方法file.readAsArrayBuffer来获取包含图像数据的缓冲区。
然后,只需使用DataView根据图像格式规范(http://en.wikipedia.org/wiki/JPEG或http://en.wikipedia.org/wiki/Portable_Network_Graphics)读取内容。
处理图像数据压缩会很困难,但尝试更糟糕。另一方面,您可以尝试删除PNG标题或JPEG exif数据以使图像更小,这样做应该更容易。
您必须在另一个缓冲区上创建另一个DataWiew,并用过滤后的图像内容填充它。然后,您只需使用window.btoa将图像内容编码为DataURI。
如果你实现类似的东西,请告诉我,通过代码会很有趣。
答案 4 :(得分:2)
您可以查看image-conversion,在这里尝试-> demo page
答案 5 :(得分:2)
我发现与接受的答案相比,有一种更简单的解决方案。
- 读取文件
使用HTML5 FileReader API和.readAsArrayBuffer
- 使用文件数据创建Blob,并使用
获取其url。window.URL.createObjectURL(blob)
- 创建新的Image元素并将其src设置为文件blob url
- 将图像发送到画布。画布大小设置为所需的输出大小
- 通过
canvas.toDataURL("image/jpeg",0.7)
从画布获取缩小的数据(设置自己的输出格式和质量)- 将新的隐藏输入内容附加到原始格式
并基本上以普通文本的形式传输dataURI图片在后端,读取dataURI,从Base64解码,然后保存
根据您的问题:
有没有一种压缩图像的方法(主要是jpeg,png和gif) 直接在浏览器端进行上传
我的解决方案:
直接通过URL.createObjectURL(inputFileElement.files[0])
用文件创建blob。
与接受的答案相同。
与接受的答案相同。值得一提的是,画布大小是必需的,并使用img.width
和img.height
来设置canvas.width
和canvas.height
。不是img.clientWidth
。
通过canvas.toBlob(callbackfunction(blob){}, 'image/jpeg', 0.5)
获取缩小图像。设置'image/jpg'
无效。也支持image/png
。用File
在callbackfunction
body 内部创建一个新的let compressedImageBlob = new File([blob])
对象。
添加新的隐藏输入或send via javascript。服务器无需解码任何内容。
检查https://javascript.info/binary以获取所有信息。阅读完本章后,我便提出了解决方案。
代码:
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload" multiple>
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
此代码看起来比其他答案要可怕得多。
必须将所有内容放入img.onload
中。否则,随着时间canvas
的分配,canvas
将无法正确获取图像的宽度和高度。
function upload(){
var f = fileToUpload.files[0];
var fileName = f.name.split('.')[0];
var img = new Image();
img.src = URL.createObjectURL(f);
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(function(blob){
console.info(blob.size);
var f2 = new File([blob], fileName + ".jpeg");
var xhr = new XMLHttpRequest();
var form = new FormData();
form.append("fileToUpload", f2);
xhr.open("POST", "upload.php");
xhr.send(form);
}, 'image/jpeg', 0.5);
}
}
3.4MB
.png
文件压缩测试,参数设置为image/jpeg
。
|0.9| 777KB |
|0.8| 383KB |
|0.7| 301KB |
|0.6| 251KB |
|0.5| 219kB |
答案 6 :(得分:1)
@ daniel-allen-langdon在上面发布的downscaleImage()
函数存在问题,因为图像负载为image.width和image.height
属性无法立即使用>异步。
请参见下面的更新的TypeScript示例,其中考虑了这一点,使用了async
函数,并根据最长尺寸而不是宽度来调整图像大小
function getImage(dataUrl: string): Promise<HTMLImageElement>
{
return new Promise((resolve, reject) => {
const image = new Image();
image.src = dataUrl;
image.onload = () => {
resolve(image);
};
image.onerror = (el: any, err: ErrorEvent) => {
reject(err.error);
};
});
}
export async function downscaleImage(
dataUrl: string,
imageType: string, // e.g. 'image/jpeg'
resolution: number, // max width/height in pixels
quality: number // e.g. 0.9 = 90% quality
): Promise<string> {
// Create a temporary image so that we can compute the height of the image.
const image = await getImage(dataUrl);
const oldWidth = image.naturalWidth;
const oldHeight = image.naturalHeight;
console.log('dims', oldWidth, oldHeight);
const longestDimension = oldWidth > oldHeight ? 'width' : 'height';
const currentRes = longestDimension == 'width' ? oldWidth : oldHeight;
console.log('longest dim', longestDimension, currentRes);
if (currentRes > resolution) {
console.log('need to resize...');
// Calculate new dimensions
const newSize = longestDimension == 'width'
? Math.floor(oldHeight / oldWidth * resolution)
: Math.floor(oldWidth / oldHeight * resolution);
const newWidth = longestDimension == 'width' ? resolution : newSize;
const newHeight = longestDimension == 'height' ? resolution : newSize;
console.log('new width / height', newWidth, newHeight);
// Create a temporary canvas to draw the downscaled image on.
const canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;
// Draw the downscaled image on the canvas and return the new data URL.
const ctx = canvas.getContext('2d')!;
ctx.drawImage(image, 0, 0, newWidth, newHeight);
const newDataUrl = canvas.toDataURL(imageType, quality);
return newDataUrl;
}
else {
return dataUrl;
}
}
答案 7 :(得分:1)
我改进了此功能:
var minifyImg = function(dataUrl,newWidth,imageType="image/jpeg",resolve,imageArguments=0.7){
var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl;
(new Promise(function(resolve){
image = new Image(); image.src = dataUrl;
log(image);
resolve('Done : ');
})).then((d)=>{
oldWidth = image.width; oldHeight = image.height;
log([oldWidth,oldHeight]);
newHeight = Math.floor(oldHeight / oldWidth * newWidth);
log(d+' '+newHeight);
canvas = document.createElement("canvas");
canvas.width = newWidth; canvas.height = newHeight;
log(canvas);
ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, newWidth, newHeight);
//log(ctx);
newDataUrl = canvas.toDataURL(imageType, imageArguments);
resolve(newDataUrl);
});
};
它的使用:
minifyImg(<--DATAURL_HERE-->,<--new width-->,<--type like image/jpeg-->,(data)=>{
console.log(data); // the new DATAURL
});
享受;)
答案 8 :(得分:1)
Compressor.js
https://github.com/fengyuanchen/compressorjs
import axios from 'axios';
import Compressor from 'compressorjs';
document.getElementById('file').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) {
return;
}
new Compressor(file, {
quality: 0.6,
// The compression process is asynchronous,
// which means you have to access the `result` in the `success` hook function.
success(result) {
const formData = new FormData();
// The third parameter is required for server
formData.append('file', result, result.name);
// Send the compressed image file to server with XMLHttpRequest.
axios.post('/path/to/upload', formData).then(() => {
console.log('Upload success');
});
},
error(err) {
console.log(err.message);
},
});
});
答案 9 :(得分:0)
对于JPG图像压缩,您可以使用称为JIC的最佳压缩技术 (Javascript图像压缩)这肯定会对您有所帮助 - &gt; https://github.com/brunobar79/J-I-C