我正在寻找一个客户端解决方案来验证上传的图像是否为可接受的文件类型、文件大小和大小；然后根据用户的指示裁剪图像，重新调整其大小以适应某些特定的尺寸&然后上传重新调整大小的&优化的镜像到服务器。
有什么众所周知的开源库可以帮助我实现这一点吗？(不需要上传多个文件)。我不想自己实现这一点&寻找一个可以为旧的/不受支持的浏览器提供跨浏览器兼容的解决方案的库。
我遇到了plupload&敏捷的上传器，但这些并不能帮助根据用户指示裁剪图像。
使用jQuery 1.7。如果需要，打开以添加其他库。
愿你兄弟平安
我在我的项目中使用你想要的，但没有(调整照片大小，因为我为图像设置了自定义大小)
我使用(imgareaselect)裁剪照片
但我不记得它的地点了，也许：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聊天室，在问题中找到一个帮助我的聊天室
抱歉我英语不好，我说的是阿拉伯语
可以使用FileReader和画布进行调整大小。创建一个具有所需大小的画布。
加载图像。然后使用canvas.toDataURL(fileType)以base64 的形式获取文件内容
尝试使用Fine Uploader进行客户端验证和上传；其中JCrop用于随后的图像裁剪。
Fine上传器非常适合在客户端限制大小和文件类型(请参阅此处)；然而，它确实取决于您需要支持哪些浏览器(我相信IE7不允许您像这样在客户端进行验证)。
而JCrop是一个易于实现的裁剪工具，它支持纵横比和在显示和实际尺寸之间转换图像。
这里有几个独立的东西：
-
正在验证图像/文件类型。这可以在客户端完成，但为了安全起见，您需要在服务器上再次执行。对于只接受图像的文件输入，您可以使用：
<input type="file" accept='image/*'> -
让用户裁剪图像。这里有几个图书馆，最著名的是Jcrop。但也有其他选择，比如imgareaselect、jqCrop和jquery cropbox(我创建并维护了jquery cropbox)。关于如何开始使用一两行jquery，请参阅这里的一个非常简单的示例。
http://acornejo.github.io/jquery-cropbox/
- 在客户端进行实际裁剪。这需要HTML5，因此无法与旧版本的internet explorer配合使用。特别是，您将需要画布api，可能还需要文件api(为文件提供服务)。jquery crospbox也可以通过
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('upload succeeded'); }, error: function () { alert('upload failed'); } });}，
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的作用，
FormData对象允许您将一组键/值对编译为使用XMLHttpRequest发送。它主要用于发送表单数据，但可以独立于表单使用，以便传输键控数据。传输的数据格式与如果表单的编码类型设置为"多部分/表单数据"。
addEventListener为您所做的是
addEventListener()在单个目标事件目标可以是文档中的单个元素文档本身、窗口或XMLHttpRequest。
您可以使用upload.php在服务器级别上传文件。
如果你想在插件中拥有这个功能，你可以用上面的代码扩展插件，它不会阻塞你的插件，因为这是一个非常直接的代码片段，可以完成任务。我已经成功地将代码集成到一个插件中，没有任何问题。
此链接将向您展示如何验证文件大小。JavaScript文件上传大小验证
重新调整尺寸以适应某些特定尺寸javascript图像调整大小
如何按比例调整图像大小/保持纵横比？
这些链接应该对您有所帮助。我不打算将所有代码集成为一个，因为为了保持代码的简单性，您可以很容易地理解。
如果你有任何问题，请告诉我。
至于文件类型和大小：
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 */}
请使用以下方法检查客户端上的文件大小：
<script type="text/javascript">
$('#image-file').bind('change', function() {
alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
});
</script>
如果你需要一个插件类型来用于整个项目，你可以看看这个。
如果你正在寻找一个多上传器，请使用这个。
请看一下这个库
这是文档页您可以在其中设置最大调整大小值，
<maxwidth>800</maxwidth>
<maxheight>500</maxheight>
<minwidth>100</minwidth>
<minheight>70</minheight>
我有个主意。您可以尝试使用此插件进行上传。
http://des.delestesoft.com:8080/?go=2
定义属性时：postvariables->
variables:{
sessionID:"abcdefg",
width:$("#myimage").width(),
height:$("#myimage").heigth()
},
在服务器端：获取文件并根据post变量更改图像大小。