Skip to main content
 首页 » 编程设计

jquery之蓝色小鬼文件上传客户端大小图像调整大小和裁剪

2026年07月28日5jiqing9006

我正在使用这个jquery图片上传插件 https://github.com/blueimp/jQuery-File-Upload

我需要的是按照客户端大小调整/裁剪图像,使其具有精确的高度和宽度,然后上传到服务器。

这是上传脚本的一部分,它工作正常,唯一的问题是它只是调整图像大小而不裁剪,我最终得到上传的图像,例如宽度为 150 px,高度为 133 px(尽管初始图片的高度和宽度超过 1000 px,我想要精确的高度和宽度 - 150 px)。从选项列表中,我认为 imageCrop 应该可以解决问题,https://github.com/blueimp/jQuery-File-Upload/wiki/Options#imagecrop ,但事实并非如此。我是否做错了什么,或者插件不支持我需要的功能?如果是这样,有什么方法可以使用此插件使用一些外部库/函数来实现我需要的功能?

谢谢

编辑:

我也尝试过这个选项

 canvas: true, 
 cover: true, 
 crop: true, 
 thumbnail: true, 
 aspectRatio: '1/1' 

但是没有效果

$('#fileupload').fileupload({ 
    url: 'test.php' 
     dataType: 'json', 
     imageCrop: true, 
     process: [ 
         { 
             action: 'load', 
             fileTypes: /^image\/(gif|jpeg|png)$/, 
             maxFileSize: 20000000 // 20MB 
         }, 
         { 
             action: 'resize', 
             maxWidth: 150, 
             maxHeight: 150, 
             minWidth: 150, 
             minHeight: 150, 
             imageCrop: true 
         }, 
         { 
             action: 'save' 
         }, 
         {action: 'duplicateImage'}, 
         { 
             action: 'resize', 
             maxWidth: 100, 
             maxHeight: 100, 
             minWidth: 100, 
             minHeight: 100, 
             imageCrop: true 
         }, 
         { 
             action: 'save' 
         } 
     ], ... 

请您参考如下方法:

根据“blueimp”手册进行客户端图像调整大小,您必须将选项disableImageResize设置为false

$('#fileupload').fileupload({ 
    url: 'test.php', 
    dataType: 'json', 
    disableImageResize: false, 
    imageMaxWidth: 800, 
    imageMaxHeight: 800, 
    imageCrop: true 
}) 

Reference to src.