Dropzone调整大小功能

Question

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

我在调整大小功能时遇到问题.如果长宽比错误,我的图像会不断裁剪.

我想知道两件事:

1. 我可以配置dropzone以适合(不拉伸或裁剪)pics到预览元素.
2. 我可以在预览被删除后调整预览(即查看预览小,中或大.

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

如果有人有1,那么1的例子会非常有用.谢谢,马特.

Answer 1

实际上,只有在明确指定两个选项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,则使用resizedropzone.js 的功能.它必须返回具有多个属性的对象,如文档中所述.以下是根据缩略图尺寸调整预览大小的示例:

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;
    }
});

这将导致拉伸预览.不过,当然,你可以计算出trgWidth,并trgHeight根据您的源图像尺寸,您的大小尺寸股利或希望以使预览任何看起来像你想要的.

Answer 2

不幸的是，无法在配置中指定 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);