When the larger suspended animation browser Preview

[xiaoyuit]

When I preview the big picture browser will be suspended for a period of time, ask the problems to be resolved, the preview code is as follows:

function previewImage(file, callback) {
            if (!file || !/image\//.test(file.type)) return;
            if (file.type == 'image/gif') {
                var fr = new mOxie.FileReader();
                fr.onload = function () {
                    callback(fr.result);
                    fr.destroy();
                    fr = null;
                }
                fr.readAsDataURL(file.getSource());
            } else {
                var preloader = new mOxie.Image();
                preloader.onload = function () {
                    preloader.downsize(200, 100);
                    var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL();
                    callback && callback(imgsrc);
                    preloader.destroy();
                    preloader = null;
                };
                preloader.load(file.getSource());
            }
        }

[jayarjo]

How big is the file that you are trying to preview?

[xiaoyuit]

100M or so

[jayarjo]

Can you put that image somewhere? I will troubleshoot it. But to be honest it might easily be hitting browsers limits there.

[xiaoyuit]

Here is the picture address https://lxyit.com/image.jpg

[xiaoyuit]

May I ask if this problem can be solved?

[xiaoyuit]

My temporary solution now：

    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

   function previewImage(file, callback) {
        if (!file || !/image\//.test(file.type)) return; 
        var strsrc=getObjectURL(file.getSource().getSource());
        callback(strsrc);
    }

[jayarjo]

@xiaoyuit what exactly your solution does and how it is supposed to ease your problem?

[jayarjo]

It took me forever to download that file, browser got halted even when trying to simply enlarge it, I guess no surprise that it has problems to convert it to dataUrl and then preview it.

If previewing a blob does solve the problem for you, you can bypass dataUrl (FileReader) step altogether, as our Image wrapper can load blobs directly. So consider something like this: http://play.plupload.com/5_J

[xiaoyuit]

window.URL.createObjectURL has a better performance than FileReader, especially in the big picture preview; when I preview my test images, improve the performance obviously, but there will still be 3 seconds Caton

[xiaoyuit]

My test picture is about 70M, so it will be slow when downloading. This test picture is the original picture of the panorama

[jayarjo]

There was a problem with fiddle url, try now.

[jayarjo]

Did the fiddle solve your problem?

[xiaoyuit]

Without solving my problem, I can preview normally when I select a small picture and cannot preview when selecting a large picture

[xiaoyuit]

Using this address to download pictures might be faster. The server bandwidth I had sent before was too small. If you test, you can download this picture

http://ov4n93l3p.bkt.gdipper.com/image.jpg

[jayarjo]

Ok, that image seems too big (13956x6978), internally there's a constraint on image supported dimensions 8192x8192, if either side of the image is bigger than that moxie.image.Image will fire an error.

I need to reconsider that though, since modern browsers can handle higher dimensions.

[xiaoyuit]

How can I support this kind of picture and ensure better preview performance?

[jayarjo]

Preview generation for large images should be much faster now in 2.3.3. However in underlying Image handler there's still a built-in constraint of 8192x8192. However it can be worked around by manually enlarging the boundaries. Check this updated playground for reference: http://play.plupload.com/5__J_/2

[xiaoyuit]

Yes, the preview of the big picture has been much faster