Question

我正在寻找一个客户端解决方案来验证正在上传的图片是否是接受的文件类型，文件大小＆amp;然后根据用户的指示裁剪图像，重新调整尺寸以适合某些特定尺寸＆amp;然后上传重新调整大小的＆amp;优化图像到服务器。

是否有任何众所周知的开源库可以帮助我实现这一点？（不需要上传多个文件）。我不想自己实现这个＆amp;寻找能够为旧/不支持的浏览器提供回退的跨浏览器兼容解决方案的库。

我遇到了plupload＆amp;敏捷上传者，但根据用户指示，这些没有帮助裁剪图像。

使用jQuery 1.7。如果需要，也可以打开以添加其他库。

Answer 1

和平在你兄弟身上

我在我的项目中使用了你想要的东西但没有（调整大小照片，因为我为图像设置了自定义尺寸）

我使用（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;
    }

我希望我帮助你理解你的问题，

请vopte我的答案，我想加入php聊天室找一个帮我解决问题

抱歉我的英语不好我说阿拉伯语

Answer 2

可以使用FileReader和画布调整大小。创建一个所需大小的画布。

加载图像。然后使用canvas.toDataURL（fileType）将文件内容作为base64

Answer 3

尝试使用Fine Uploader进行客户端验证和上传;然后使用JCrop进行图像裁剪。

精细上传器非常适合在客户端限制大小和文件类型（See here）;但它确实取决于你需要支持哪些浏览器（我相信IE7不允许你在这样的客户端进行验证）。

虽然JCrop是一种易于实现的裁剪工具，它支持纵横比并在显示和实际尺寸之间转换图像。

Answer 4

这里有几个不同的东西：

验证图像/文件类型。这可以在客户端完成，但为了安全起见，您需要再次在服务器上执行此操作。对于仅接受图像的文件输入，您可以使用：
```
<input type="file" accept='image/*'>
```
让用户裁剪图像。这里有几个图书馆，其中最突出的是Jcrop。但是有一些替代品，比如imgareaselect，jqCrop和jquery-cropbox（我创建并保留了jquery-cropbox）。请参阅此处，了解如何开始使用一行或两行jquery的非常简单的示例。

http://acornejo.github.io/jquery-cropbox/

在客户端进行实际裁剪。这需要HTML5，因此不适用于旧版本的Internet Explorer。特别是你需要canvas api，可能还需要文件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('upload succeeded');
    },
    error: function () {
      alert('upload failed');
    }
});

}，

Answer 5

请使用以下内容检查客户端上的文件大小：

<script type="text/javascript">
    $('#image-file').bind('change', function() {
        alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
    });
</script>

如果您需要一个插件类型用于整个项目，您可以查看this。

如果您正在寻找多重上传器，请使用this。

Answer 6

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发送。它主要用于发送表单数据，但可以独立于表单使用传输密钥数据。传输的数据格式相同表单的submit（）方法将用于发送表单中的数据编码类型设置为“multipart / form-data”。

addEventListener为您做的是，

addEventListener（）在单个事件上注册单个事件侦听器目标。事件目标可以是文档中的单个元素，文档本身，窗口或XMLHttpRequest。

您可以使用upload.php在服务器级别上传文件。

如果你想在插件中使用这个功能，你可以使用上面的代码扩展插件，它不会破坏你的插件，因为这是一个非常直接的代码片段，可以完成工作。我已经成功地将代码集成到一个插件中而没有任何问题。

此链接将向您展示如何验证文件大小。 JavaScript file upload size validation

重新调整尺寸以适合某些特定尺寸 javascript Image Resize

How to resize images proportionally / keeping the aspect ratio?

这些链接对您有所帮助。我不打算将所有内容集成到一个中，因为要保持代码的简单性，以便您可以轻松理解。

如果您有任何问题，请告诉我。

Answer 7

请查看this library

和this is文档页面您可以在其中设置最大调整大小值

<maxwidth>800</maxwidth>
<maxheight>500</maxheight>
<minwidth>100</minwidth>
<minheight>70</minheight>

Answer 8

关于文件类型和大小：

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 */}

Answer 9

我有个主意。您可以尝试使用此插件上传。

http://des.delestesoft.com:8080/?go=2

定义属性时：post variables-＆gt;

variables:{
            sessionID:"abcdefg",
            width:$("#myimage").width(),
            height:$("#myimage").heigth()
        },

在服务器端：您获取文件并根据发布变量更改大小图像。

验证图像filetype / filesize，crop，resize＆amp;然后上传

9 个答案: