我正在寻找客户端解决方案来验证上传的图像是否具有可接受的文件类型、文件大小，然后按照用户的指示裁剪图像，重新调整大小以适应某些特定尺寸，然后上传重新大小和优化的图像到服务器。
是否有任何众所周知的开源库可以帮助我实现这一点？（不需要上传多个文件）。我不想自己实现这个并寻找一个可以提供跨浏览器兼容解决方案的库，并为旧的/不受支持的浏览器提供后备。
我遇到了 plupload 和敏捷上传器，但这些对根据用户指示裁剪图像没有帮助。
使用 jQuery 1.7。如果需要，也可以打开以添加其他库。
问问题
15466 次
9 回答
4
愿你平安，兄弟
我在我的项目中使用了你想要的东西，但没有（调整照片的大小，因为我为图像设置了自定义大小）
我使用（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 聊天室以找到一个帮助我解决问题的人
对不起我的英语不好我说阿拉伯语
于 2013-01-29T22:25:11.730 回答
1
尝试使用Fine Uploader进行客户端验证和上传；之后使用JCrop裁剪图像。
精细上传器非常适合在客户端限制大小和文件类型（请参阅此处）；但是它确实取决于您需要支持哪些浏览器（我相信 IE7 不允许您像这样在客户端进行验证）。
虽然 JCrop 是一个易于实现的裁剪工具，它支持纵横比和在其显示和实际尺寸之间转换图像。
于 2012-12-21T13:21:50.800 回答
1
这里有几件不同的事情：
验证图像/文件类型。这可以在客户端完成，但为了安全起见，您需要再次在服务器上执行此操作。对于只接受图像的文件输入，您可以使用：
<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-cropbox 也可以通过
getBlobandgetDataURL方法为你做这件事。如果您想手动完成，请看这里：
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'); } });},
于 2013-12-02T21:59:05.660 回答
1
可以使用 FileReader 和画布来调整大小。创建一个想要大小的画布。
加载图像。然后使用canvas.toDataURL(fileType) 获取文件内容为base64
于 2012-12-17T06:58:38.347 回答
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 */}
于 2012-12-27T12:59:02.633 回答
0
我有个主意。您可以尝试使用此插件进行上传。
http://des.deletesoft.com:8080/?go=2
定义属性时：发布变量->
variables:{
sessionID:"abcdefg",
width:$("#myimage").width(),
height:$("#myimage").heigth()
},
在服务器端：您获取文件并根据帖子变量更改大小图像。
于 2012-12-27T19:37:59.990 回答
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是，
该
FormData对象允许您编译一组键/值对以使用 XMLHttpRequest 发送。它主要用于发送表单数据，但可以独立于表单使用以传输键控数据。如果表单的编码类型设置为“multipart/form-data”，则传输的数据与表单的 submit() 方法用于发送数据的格式相同。
addEventListener 为您做的是，
addEventListener() 在单个目标上注册单个事件侦听器。事件目标可以是文档中的单个元素、文档本身、窗口或 XMLHttpRequest。
您可以使用upload.php在服务器级别上传文件。
如果你想在插件中拥有这个功能，你可以用上面的代码扩展插件，它不会破坏你的插件，因为这是一个非常简单的代码片段，可以完成工作。我已经成功地将代码集成到插件中，完全没有问题。
此链接将向您展示如何验证文件大小。JavaScript 文件上传大小验证
重新调整它的大小以适应某些特定尺寸 javascript Image Resize
这些链接应该对您有所帮助。我不会将所有内容集成为一个，因为要保持代码的简单性，以便您可以轻松理解。
如果您有任何问题，请告诉我。
于 2012-12-21T02:19:02.920 回答