In FineUploader Plugin scale , how can i define the height and width not the full width (max width option)

Question

how can I set height and width in scaling and can I depend on the image generated (quality and professional scale generation).

Answer 1

how can I set height and width in scaling

You can't. Specify a maxSize for each scaling.sizes entry and Fine Uploader will proportionally scale the image.

can I depend on the image generated (quality

Quality will be limited if you rely on the browser only. There is an entire section in the documentation that explains how you can generate higher-quality resizes by integrating a third-party resize library. I also discuss why you may or may not want to do this. From the documentation:

Fine Uploader's internal image resize code delegates to the drawImage method on the browser's native CanvasRenderingContext2D object. This object is used to manipulate a element, which represents a submitted image File or Blob. Most browsers use linear interpolation when resizing images. This can lead to extreme aliasing and moire patterns which is a deal breaker for anyone resizing images for art/photo galleries, albums, etc. These kinds of artifacts are impossible to remove after the fact.

If speed is most important, and precise scaled image generation is not paramount, you should continue to use Fine Uploader's internal scaling implementation. However, if you want to generate higher quality scaled images for upload, you should instead use a third-party library to resize submitted image files, such as pica or limby-resize. As of version 5.10 of Fine Uploader, it is extremely easy to integrate such a plug-in into this library. In fact, Fine Uploader will continue to properly orient the submitted image file and then pass a properly sized to the image scaling library of your choice to receive the resized image file, along with the original full-sized image file drawn onto a for reference. The only caveat is that, due to issues with scaling larger images in iOS, you may need to continue to use Fine Uploader's internal scaling algorithm for that particular OS, as other third-party scaling libraries most likely do not contain logic to handle this complex case. Luckily, that is easy to account for as well.

If you'd like to, for example, use pica to generate higher-quality scaled images, simply pull pica into your project, and contribute a scaling.customResizer function, like so:

scaling: {
    customResizer: !qq.ios() && function(resizeInfo) {
        return new Promise(function(resolve, reject) {
            pica.resizeCanvas(resizeInfo.sourceCanvas, resizeInfo.targetCanvas, {}, resolve)
        })
    },
    ...
}