悬浮窗大小功能

Question

我已经实现了使用http://www.dropzonejs.com/

我有大小调整功能麻烦悬浮窗页面。如果长宽比错误，我的图像会不断裁剪。

我想知道两件事情：

1. 我可以配置悬浮窗，以适应（不拉伸或裁剪）图片进入预览元素。
2. 我可以调整预览它们被丢弃后（即查看预览小型，中型或大型。

我已经通过调整CSS实现2，但我想知道是否有使用悬浮窗更好的办法代码。

如果任何人有一个为1的例子是非常有益的。 谢谢， 马特。

Answer 1

不幸的是有没有办法来指定在config无作物选择，但我设法得到它通过以下方式修改dropzone.js完成，我希望我t有帮助。

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

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

Answer 2

看起来你可以设置你的选择是这样的：

{ 
    thumbnailWidth: null, 
    thumbnailHeight: null 
} 

而悬浮窗会默认在调整你的形象。

Answer 3

实际上，只有在明确指定了选项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, 
} 

但是，如果你不知道的源图像比例，你需要让你预览适合的大小格，然后使用resize dropzone.js的功能。它必须返回具有多个属性的对象，如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 4

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

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

   .dropzone .dz预览.dz图像{ 宽度：

2. 如下重写悬浮窗CSS！汽车重要的; 身高：自动！重要; }

Answer 5

得到缩放缩略图设置thumbnailWidth或thumbnailHeight之一，另一个为空：

{ 
    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 6

最近发布了Dropzone版本5，所以如果升级到dropzone 5，那么您可以简单地使用resizeWidth和resizeHeigh来压缩图像。

如果只提供它们中的一个，然后悬浮窗将尊重原始的宽高比，例如，如果你只需要添加的选项： resizeWidth：800

然后，你的图像将被压缩到宽度= 800个像素和您的原始图像的长宽比将受到尊重。

如果你说 resizeWidth：800 resizeHeight：600

那么你的图像将被压缩，800x600像素，这取决于你的原始宽高比，您的宽度/高度可裁剪。