我正在寻找一个客户端解决方案来验证上传的图像是否为可接受的文件类型和文件大小，然后按用户指示裁剪图像，将其重新调整大小以适应某些特定尺寸，然后上传重新调整大小和优化后的图像到服务器。
有没有一些知名的开源库可以帮助我实现这个功能？（不需要多文件上传）。我不想自己实现，而是寻找一个可以提供跨浏览器兼容解决方案并具备旧/不受支持的浏览器回退功能的库。
我发现 plupload 和 agile uploader，但这些都不能根据用户指示裁剪图像。
使用jQuery 1.7。在必要时可以添加其他库。
验证图像文件类型/文件大小，裁剪，调整大小，然后上传。
22
- Rajat Gupta
3
1看一下这个。它应该可以帮助你进行裁剪/调整大小。 - undefined
由于上传者众多，而您的痛点确实是跨浏览器裁剪/调整大小。您可以尝试这个插件。我曾在一个小项目中使用过它，对我来说效果很好。不用说，您可以在各种浏览器上测试演示。 - uchamp
1请记住，在服务器端必须对输入进行重新验证（ReValidate）。永远不要相信用户的输入。 - Nasser Al-Wohaibi
9个回答
4
兄弟，祝你平安。我在我的项目中使用了你所需要的东西，但是没有调整图片大小以适应自定义尺寸。
我使用来裁剪照片。
但我不记得它的网站了，也许是：http://odyniec.net/projects/imgareaselect/examples.html
如果是这个网站，我正在使用这段代码：
var x1 = null, y1 = null, w = null, h = null, Signal = null, object=null;
function preview(img, selection) {
var img = {
url: jQuery("#image").attr("src"),
width: jQuery("#image").width(),
height: jQuery("#image").height()
}
var scaleX = 128 / selection.width; // 128 = my custom size ;)
var scaleY = 128 / selection.height;
$(".avatar-box img").replaceWith('<img id="thumbnail" src="'+img.url+'" class="preview" border="0"/>');
$('#thumbnail').css({
width: Math.round(scaleX * img.width) + 'px',
height: Math.round(scaleY * img.height) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
x1 = selection.x1; y1 = selection.y1; w = selection.width; h = selection.height;
}
$(window).ready(function () {
$('#image').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
并且为了检查大小和类型：我也使用这个脚本。
$("form").submit(function(){
var OrgFile = $(this).find("[type=file]"),
FileName = OrgFile.val(),
FileExtension = FileName.split('.').pop().toLowerCase();
if(FileName.indexOf(".")==-1 || FileExtension != "jpg" && FileExtension != "jpeg" && FileExtension != "png" && FileExtension != "gif" ){ // Curstom File Extension
alert("This isn't a Photo !");
return false;
}else
if((OrgFile[0].files[0].size/1024/1024) > (1)){ // Max Photo Size 1MB
alert("You Photo is too big !");
return false;
}else{
alert("every thing Fine :)");
return true;
}
});
如果客户提交了裁剪后的图片。
$('#create_thumbnail').submit(function() {
$.ajax({
type : "POST",
url : "resize.php",
data : {logged_code: logged_code,x1: x1,y1: y1,w: w,h: h},
success: function(data) {}
});
return false;
});
同时调整resize.php文件
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
$imageType = image_type_to_mime_type($imageType);
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
switch($imageType) {
case "image/gif":
$source=imagecreatefromgif($image);
break;
case "image/pjpeg":
case "image/jpeg":
case "image/jpg":
$source=imagecreatefromjpeg($image);
break;
case "image/png":
case "image/x-png":
imagealphablending($newImage, false);
imagesavealpha($newImage, true);
$source=imagecreatefrompng($image);
break;
}
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
switch($imageType) {
case "image/gif":
imagegif($newImage,$thumb_image_name);
break;
case "image/pjpeg":
case "image/jpeg":
case "image/jpg":
imagejpeg($newImage,$thumb_image_name,100);
break;
case "image/png":
case "image/x-png":
imagepng($newImage,$thumb_image_name);
break;
}
chmod($thumb_image_name, 0777);
return $thumb_image_name;
}
我希望能够帮到您并理解您的问题，
请投票支持我的回答，因为我想加入 PHP 聊天室以寻找帮助解决问题。
我的英语不好，我讲阿拉伯语。
- Ahmed Sabry
1
这里有几个不同的事情：
验证图片/文件类型。这可以在客户端完成，但为了安全起见，您需要在服务器上再次进行验证。对于仅接受图像的文件输入，您可以使用：
<input type="file" accept='image/*'>让用户裁剪图像。这里有几个库，最突出的是Jcrop。但也有替代品，如imgareaselect，jqCrop和jquery-cropbox（我创建并维护jquery-cropbox）。请参见此处以获取非常简单的示例，了解如何使用一两行jquery入门。
http://acornejo.github.io/jquery-cropbox/
- 在客户端进行实际裁剪。这需要HTML5，因此无法与旧版本的Internet Explorer一起使用。特别是您将需要Canvas API，可能还需要File API（用于提供文件）。jquery-cropbox也可以通过
getBlob和getDataURL方法为您完成此操作。如果您想手动完成，请看这里：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
上传图片。有许多用于上传图片的脚本可供选择。如果您正在使用jquery-cropbox，则可以像这样使用jQuery将其上传到服务器（上传此类客户端生成的表单数据还需要HTML5兼容的浏览器）。
var blob = $('#yourimage').data('cropbox').getBlob(); var fd = new FormData(); fd.append('file', blob); $.ajax({ type: 'POST', url: 'http://yourwebsite.com/handle_uploads', data: fd, cache: false, contentType: false, processData: false, success: function(data){ alert('上传成功'); }, error: function () { alert('上传失败'); } });},
- Rick Deckard
1
建议使用Fine Uploader进行客户端验证和上传；然后使用JCrop进行图像裁剪。
Fine Uploader非常适合在客户端限制大小和文件类型（请参见此处）；但是它取决于您需要支持哪些浏览器（我相信IE7不允许您像这样在客户端进行验证）。
而JCrop是一款易于实现的裁剪工具，支持纵横比和在显示大小和实际大小之间转换图像。
- Luke Merrett
1
使用FileReader和canvas可以进行调整大小。 创建所需大小的画布。
加载图像。然后使用canvas.toDataURL(fileType)将文件内容作为base64获取。
- Eric
1
不想自己实现，因为构建跨浏览器兼容解决方案会非常麻烦。 - Rajat Gupta
0
jQuery Ajax 代码
jQuery('document').ready(function(){
var input = document.getElementById("imagefile");
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
//validation to check whether uploaded files are images
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
};
reader.readAsDataURL(file);
}
if (formdata) {
//send the ajax query to upload the file(s)
jQuery.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (result) {
jQuery('div#response').html("Successfully uploaded").fadeOut();
}
});
}
}
else
{
alert('Not a vaild image!');
}
}
}, false);
});
HTML 代码
<form enctype="multipart/form-data">
<input id="imagefile" type="file" name="image" accept="image/*"/ />
</form>
上述代码将为您执行的操作是，一旦您上传文件，它将首先验证图像类型并通过ajax为您上传。如果需要，您可以进行多个文件上传。如果您想知道
FormData的作用，
addEventListener为您做的是，
FormData对象允许您编译一组键/值对以使用XMLHttpRequest发送。它主要用于发送表单数据，但可以独立于表单使用以传输键入数据。传输的数据与表单的submit()方法使用的格式相同，如果表单的编码类型设置为"multipart/form-data"，则会使用该格式发送数据。
您可以使用addEventListener()在单个目标上注册单个事件侦听器。事件目标可以是文档中的单个元素、文档本身、窗口或XMLHttpRequest。
upload.php在服务器级别上传文件。
如果您想在插件中使用此功能，您可以使用上述代码扩展插件，这不会破坏您的插件，因为这是一个非常简单直接的代码片段，可以完成工作。我已经成功地将代码集成到了一个插件中，没有任何问题。
此链接将向您展示如何验证文件大小。JavaScript 文件上传大小验证
重新调整大小以适应特定尺寸 javascript 图像调整大小
这些链接应该对您有所帮助。我不会将所有内容集成到一个代码中，因为要保持代码的简洁易懂。
如果您有任何问题，请让我知道。
- Techie
1
感谢您的长篇回答，但是如果您完全阅读了我的问题，我还需要根据用户的指示裁剪图像，同时调整图像大小（不仅仅是在页面上，而是实际上，这可能是您误解的）。所以，您告诉我如何验证文件类型和文件大小，但这已经可以通过plupload实现。此外，plupload可以帮助我调整图像大小并减少实际文件中的质量，那么为什么我要自己构建另一个插件呢？ - Rajat Gupta
0
关于文件类型和大小：
var fileUpload = $(':file[id="fileUploadId"]');
var fileName = $(fileUpload).val();
// Checking type:
if(fileName.indexOf('.jpg') || fileName.indexOf('.gif')){/* Accepted types */}
// Check size
if($(fileUpload).size() <= yourAcceptedSize) {/* Accepted size */}
- user1353468
0
我有一个想法。 你可以尝试使用这个插件来上传。
http://des.delestesoft.com:8080/?go=2
当你定义属性时：post变量->
variables:{
sessionID:"abcdefg",
width:$("#myimage").width(),
height:$("#myimage").heigth()
},
在服务器端：您获取文件并根据POST变量更改图像大小。
- toto
2
@学习者 - 请不要使用“这里”或“这个”作为链接文本（http://meta.stackexchange.com/questions/118389/is-there-an-official-position-regarding-text-links-written-as-here-or-this）。 - Flexo
@Olumide - 如链接文章所述，这对视力受损的用户非常不友好，对我们其他人来说也是不良的用户体验。我的评论是针对只添加了单词“here”的编辑器。 - Flexo
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接