Black border when resizing on iPhone Safari

[edwh]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-fileinput. (I'm on 4.5.1 which is very recent)
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Use iPhone Safari
2. Use resizeImage: true, maxImageWidth: 800.

Expected behavior and actual behavior

Get a resized photo which looks ok.

When I follow those steps, I see a black border on the image:

I've got the image here by dumping the image posted to the server.

I was expecting no black border, i.e. appropriate image dimensions.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 3.3.1
• bootstrap-fileinput version: 4.5.1

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

I can only repro this on an iPhone using Safari.

[kartik-v]

This is due to an iOS restriction / bug / behavior where it subsamples images over 2Megapixels. According to this link, JPEG files over 2M pixels will be subsampled.

Will check later on this when I get time.

[edwh]

Thanks. It would be useful if there was any way to know on the client that this might occur, because then I could avoid resizing. That's not ideal, because obvious resizing is good for bandwidth, but it would avoid having images that look bad.

…

------ Original Message ------ From: "Kartik Visweswaran" <notifications@github.com> To: "kartik-v/bootstrap-fileinput" <bootstrap-fileinput@noreply.github.com> Cc: "Edward Hibbert" <edward@ehibbert.org.uk>; "Author" <author@noreply.github.com> Sent: 06/12/2018 11:03:17 Subject: Re: [kartik-v/bootstrap-fileinput] Black border when resizing on iPhone Safari (#1337)

This is due to an iOS restriction / bug / behavior where it subsamples images over 2Megapixels. According to this link <https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15>, JPEG files over 2M pixels will be subsampled. Will check later on this when I get time. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1337 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADdeMaD1qV-cDyQDMsho2if21qe78ZDks5u2Pl1gaJpZM4ZEcX1>.

[fstrahberger]

Hello Edward,
here is a solution that helped me solve this problem:

• use https://github.com/stomita/ios-imagefile-megapixel to resize the image
• disable resize in fileinput config

$("#upload_files").fileinput({
        language: 'de',
        previewFileType: "image",
        maxFileCount: 20,
        autoOrientImage: true,
        // maxImageHeight: 1200,
        // maxImageWidth: 1200,
        // resizePreference: 'width',
        // resizeImage: true,
        browseClass: "btn btn-success",

• resize the images in fileimagesloaded event (get files from stack, clear stack , refill stack with modified images)

$('#upload_files').on('fileimagesloaded ', function(event) {
    var myFiles = $('#upload_files').fileinput('getFileStack');
    $('#upload_files').fileinput('clearStack');

    var imgList = [];
    for (i = 0; i < myFiles.length; i++) {
       let item = {
            mpimg: new MegaPixImage(myFiles[i]),
            file: myFiles[i]
        };
        imgList.push(item);
    }

    imgList.forEach(function(item) {
         var c = document.createElement("canvas");
         item.mpimg.render(c, { maxWidth: 1200, maxHeight: 1200 }, function(i){
             c.toBlob(function(blob){
                 blob.lastModifiedDate = item.file.lastModifiedDate;
                 blob.name = item.file.name;
                 blob.type = item.file.type;
                 $('#upload_files').fileinput('addToStack', blob);
             }, item.file.type, 0.75);
         });
    });
});

[edwh]

Thanks for this. Do you have any advice for how to detect when to do this vs the usual code?

…

------ Original Message ------ From: "fstrahberger" <notifications@github.com> To: "kartik-v/bootstrap-fileinput" <bootstrap-fileinput@noreply.github.com> Cc: "Edward Hibbert" <edward@ehibbert.org.uk>; "Author" <author@noreply.github.com> Sent: 20/12/2018 12:12:45 Subject: Re: [kartik-v/bootstrap-fileinput] Black border when resizing on iPhone Safari (#1337)

Hello Edward, here is a solution that helped me solve this problem: use https://github.com/stomita/ios-imagefile-megapixel to resize the imagedisable resize in fileinput config $("#upload_files").fileinput({ language: 'de', previewFileType: "image", maxFileCount: 20, autoOrientImage: true, // maxImageHeight: 1200, // maxImageWidth: 1200, // resizePreference: 'width', // resizeImage: true, browseClass: "btn btn-success", resize the images in fileimagesloaded event (get files from stack, clear stack , refill stack with modified images) $('#upload_files').on('fileimagesloaded ', function(event) { var myFiles = $('#upload_files').fileinput('getFileStack'); $('#upload_files').fileinput('clearStack'); var imgList = []; for (i = 0; i < myFiles.length; i++) { let item = { mpimg: new MegaPixImage(myFiles[i]), file: myFiles[i] }; imgList.push(item); } imgList.forEach(function(item) { var c = document.createElement("canvas"); item.mpimg.render(c, { maxWidth: 1200, maxHeight: 1200 }, function(i){ c.toBlob(function(blob){ blob.lastModifiedDate = item.file.lastModifiedDate; blob.name = item.file.name; blob.type = item.file.type; $('#upload_files').fileinput('addToStack', blob); }, item.file.type, 0.75); }); }); }); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1337 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADdeEH-kUtVXz8KzN2TFz1q-P-rKAlmks5u6369gaJpZM4ZEcX1>.

[silentcossack]

I can confirm this bug.
This only happens when taking a photo on iPhone in portrait mode. Landscape photos are fine. I believe the code does not properly detect image orientation and resizes improper dimensions.

[kartik-v]

The orientation validation specific to iOS safari browser would be resolved by #1362.