我正在寻找一种使用JavaScript调整图像客户端大小的方法(真正调整大小,而不仅仅是更改宽度和高度)。
我知道可以在Flash中进行此操作,但如果可能的话,我想避免这样做。
网络上是否有任何开源算法?
我正在寻找一种使用JavaScript调整图像客户端大小的方法(真正调整大小,而不仅仅是更改宽度和高度)。
我知道可以在Flash中进行此操作,但如果可能的话,我想避免这样做。
网络上是否有任何开源算法?
Answers:
这是执行此操作的要点:https : //gist.github.com/dcollien/312bce1270a5f511bf4a
(ES6版本和.js版本,可以包含在脚本标签中)
您可以按以下方式使用它:
<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
ImageTools.resize(this.files[0], {
width: 320, // maximum width
height: 240 // maximum height
}, function(blob, didItResize) {
// didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
document.getElementById('preview').src = window.URL.createObjectURL(blob);
// you can also now upload this blob using an XHR.
});
};
</script>
它包括许多支持检测和polyfill,以确保它在我能管理的尽可能多的浏览器上运行。
(它也会忽略gif图像-如果它们是动画的)
imageSmoothingEnabled
为TRUE;和imageSmoothingQuality
向high
。在打字稿中,该块看起来像: const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; (ctx as any).imageSmoothingQuality = 'high'; ctx.drawImage(image, 0, 0, width, height);
答案是肯定的-在HTML 5中,您可以使用canvas元素在客户端调整图像的大小。您还可以获取新数据并将其发送到服务器。请参阅本教程:
http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
如果您在上载之前要调整大小,我只是发现了这个 http://www.plupload.com/
它以任何可以想象的方法为您解决所有难题。
不幸的是,Mozilla浏览器仅支持HTML5调整大小,但是您可以将其他浏览器重定向到Flash和Silverlight。
我只是尝试了一下,它与我的android一起工作了!
我在Flash 中使用的是http://swfupload.org/,效果很好,但调整大小的尺寸很小。(无法记住该限制),并且当Flash不可用时不会返回html4。
http://nodeca.github.io/pica/demo/
在现代浏览器中,您可以使用画布加载/保存图像数据。但是,如果在客户端上调整图像大小,则应牢记以下几点:
在将图像上传到服务器之前,可以使用javascript图像处理框架进行客户端图像处理。
下面我用MarvinJ基于以下页面的例子来创建可运行代码: “它上传到服务器之前,在处理客户端的图像”
基本上,我使用Marvin.scale(...)方法来调整图像大小。然后,我将图像上传为Blob(使用image.toBlob()方法)。服务器回答提供所接收图像的URL。
/***********************************************
* GLOBAL VARS
**********************************************/
var image = new MarvinImage();
/***********************************************
* FILE CHOOSER AND UPLOAD
**********************************************/
$('#fileUpload').change(function (event) {
form = new FormData();
form.append('name', event.target.files[0].name);
reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = function(){
image.load(reader.result, imageLoaded);
};
});
function resizeAndSendToServer(){
$("#divServerResponse").html("uploading...");
$.ajax({
method: 'POST',
url: 'https://www.marvinj.org/backoffice/imageUpload.php',
data: form,
enctype: 'multipart/form-data',
contentType: false,
processData: false,
success: function (resp) {
$("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
},
error: function (data) {
console.log("error:"+error);
console.log(data);
},
});
};
/***********************************************
* IMAGE MANIPULATION
**********************************************/
function imageLoaded(){
Marvin.scale(image.clone(), image, 120);
form.append("blob", image.toBlob());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
<input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>
是的,对于现代浏览器,这是完全可行的。甚至可以将文件专门作为二进制文件上传,完成了许多画布更改。
(此答案是此处接受的答案的改进)
请紧记在PHP中捕获结果提交过程,类似于:
//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it's temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);
如果您担心Vitaly的观点,您可以尝试在正在使用的jfiddle上进行一些裁剪和调整大小。
以我的经验,此示例是上传已调整大小的图片的最佳解决方案:https : //zocada.com/compress-resize-images-javascript-browser/
它使用HTML5 Canvas功能。
代码像这样“简单”:
compress(e) {
const fileName = e.target.files[0].name;
const reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = event => {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
const elem = document.createElement('canvas');
const width = Math.min(800, img.width);
const scaleFactor = width / img.width;
elem.width = width;
elem.height = img.height * scaleFactor;
const ctx = elem.getContext('2d');
// img.width and img.height will contain the original dimensions
ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
ctx.canvas.toBlob((blob) => {
const file = new File([blob], fileName, {
type: 'image/jpeg',
lastModified: Date.now()
});
}, 'image/jpeg', 1);
},
reader.onerror = error => console.log(error);
};
}
由于忽略EXIF数据,此选项只有一个缺点,它与图像旋转有关。我目前正在处理。完成后将更新。
另一个缺点是缺乏对IE / Edge的支持,我也正在对此进行努力。虽然上面的链接中有信息。对于这两个问题。