拖放区调整大小功能

Question

我已经使用http://www.dropzonejs.com/实现了一个dropzone页面

我在调整大小功能时遇到问题。如果图像的纵横比错误，我的图像会不断被裁剪。

我想知道两件事：

1. 我可以配置 dropzone 以使图片适合（不拉伸或裁剪）预览元素。
2. 我可以在预览被删除后调整它们的大小（即查看预览的小、中或大。

我通过调整 css 实现了 2，但我想知道是否有更好的方法使用 dropzone 代码。

如果有人有 1 的示例，将会非常有帮助。 谢谢， 马特。

Answer 1

对@Gui-Don 的回答稍作修改以保持图像的纵横比。

thumbnailWidth: 400,
thumbnailHeight: 400,       
resize: function(file) {

        var thumbNHeight = this.options.thumbnailHeight;
        var thumbNWidth = this.options.thumbnailWidth;

        var ratio = 1;
        if (file.width > file.height) {
            ratio = (file.width / file.height);

            thumbNHeight = thumbNHeight / ratio;

        } else if (file.height > file.width) {

            ratio = (file.height / file.width);

            thumbNWidth = thumbNWidth / ratio;

        }

        var resizeInfo = {
            srcX: 0,
            srcY: 0,
            trgX: 0,
            trgY: 0,
            srcWidth: file.width,
            srcHeight: file.height,
            trgWidth: thumbNWidth,
            trgHeight: thumbNHeight
        };

        return resizeInfo;
}

Answer 2

实际上，只有当您明确指定thumbnailWidth 和thumbnailHeight 两个选项时，预览似乎才会被裁剪。否则，如果您只指定一个或不指定缩略图尺寸，则整个图像将根据指定的选项按比例调整大小thumbnailWidth 或 thumbnailHeight。

示例，使用 1200x800 图像源：

// Resized preview (400x267)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: 400,
    thumbnailHeight: null
}

// Resized preview (600x400)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: null,
    thumbnailHeight: 400,
}

// Croped preview (400x400)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: 400,
    thumbnailHeight: 400,
}

但是，如果您不知道源图像的比例并且需要使您的预览适合大小的 div，那么请使用 dropzone.js 的resize 函数。它必须返回一个具有多个属性的对象，如the documentation 中所述。以下是根据缩略图尺寸调整预览大小的示例：

var dp = new Dropzone(document.getElementById('myDropzone'), {

    // Your dropzone options here...

    thumbnailWidth: 400,
    thumbnailHeight: 400,
    resize: function(file) {
        var resizeInfo = {
            srcX: 0,
            srcY: 0,
            trgX: 0,
            trgY: 0,
            srcWidth: file.width,
            srcHeight: file.height,
            trgWidth: this.options.thumbnailWidth,
            trgHeight: this.options.thumbnailHeight
        };

        return resizeInfo;
    }
});

这将导致拉伸预览。 但当然，您可以根据您的源图像尺寸、您的 div 尺寸或您想要的任何东西找出trgWidth 和trgHeight，以使预览看起来像您想要的那样。

Answer 3

要获得缩放的缩略图，请将 thumbnailWidth 或 thumbnailHeight 之一设置为 null：

{
  thumbnailWidth: null,
  thumbnailHeight: "120"
}

并应用以下 css：

.dropzone .dz-preview .dz-image {
  width: auto !important;
  height: auto !important;
}

.dropzone .dz-preview .dz-image img{
  max-width: 100%;
}

img 上的最大宽度，用于响应式网站在窄屏幕上缩放图像。

Answer 4

是的，你可以。要获得未裁剪的缩略图，您需要做两件事：

1. 在初始化选项中指定 thumbnailWidth 和 thumbnailHeight。如果您想要固定高度，请将 null 作为 thumbnailWidth 的值传递，反之亦然，如果您想要固定宽度。

2. 如下覆盖dropzone css：

   .dropzone .dz-preview .dz-image { 宽度：自动！重要； 高度：自动！重要； }

Answer 5

看起来你可以像这样设置你的选项：

{
    thumbnailWidth: null,
    thumbnailHeight: null
}

Dropzone 会默认调整图片大小。

Answer 6

不幸的是，无法在配置中指定 no-crop 选项，但我设法通过以下方式修改 dropzone.js 来完成它，希望对您有所帮助。

此修改将保留具有固定高度的纵横比（您可以将其更改为固定宽度）。

第 1173 行替换：

resizeInfo.trgWidth = _this.options.thumbnailWidth;

有了这个：

resizeInfo.trgWidth = img.width * (_this.options.thumbnailHeight / img.height);

并在 1182 行 替换：

ctx.drawImage(img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);

有了这个：

ctx.drawImage(img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, img.width, img.height, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);