Image upload from iPhone/iPad rotates 90 degrees

One of my latest projects dealt with image manipulation, and I had a real struggle coming to the final version of the code.
The size of an image (in MB/KB) is partially dependent on the size of the image (pixels).  If you have two images of the same content with one being 3000px x 3000px – and the other is 50px x 50px – then chances are the smaller one (in pixels) will load faster.  This is especially important for users on a mobile device, as they may be on a slower connection.
This is why many sites – including FaceBook, store multiple-sized images (of the same thing). They’ll store the “original” and a “thumbnail” (and various sizes of the thumbnail).  When a user needs to view a “lot” of pictures, the thumbnails will be shown (which are faster); and then the user clicks on one, they can see the larger picture (which will take longer to load).  The larger picture is not loaded automatically, in an effort to save download time.
So for my app, I needed to store multiple sizes of the same picture.  But taking this a step further: what if, when the user sends (uploads) the file to the server, it was already in a reduced size, thus making the app load faster? I began looking into JavaScript solutions.  Note: it is possible to load the “original” image to the server, and use a server-side language to create multiple-sized thumbnails.  And I do do this; but I wanted to avoid it for the initial file upload.
So I needed to take the contents of a “file input” and put it onto the screen (visible, or not) – perhaps in an IMG tag or a CANVAS.  Then I had to resize the image (make it smaller in pixels >> smaller in file size >> faster to upload).  But I had to figure out how to get it from an HTML component (not the “file” input type) to the server.  To do this, you have to convert the image/canvas to a Blob.  Note: on the server side, I had a validation check for “the file that the user is trying to upload: is it of a certain data type?”  But when it’s converted to a Blob, there is no file extension!  So that caused some of my server-side checks to fail…
Anyways, this was all working, except that Apple has a “feature” in that they can (inaccurately) detect the orientation of the image.  Basically when you upload an image from an iPhone/iPad, it will rotate it 90 degrees! I didn’t want to have to come up with code to detect the operating system the user is on, and deal with it that way; rather, I wanted to find out from the image itself.
Turns out there is a concept of EXIF that stores extra data related to the image (ex. the location where it was taken).  And Apple likes to put in a value in the orientation that messes things up.
I tried everything to find the solution for “iPhone rotates image when uploaded” – but couldn’t find a client-side (JavaScript) or server-side (ex. PHP) solution.  I figured that a client-side solution would be easier to implement, so I began my search.
I tried to find a JavaScript library to help; I came across these two, but couldn’t get it to work:
https://github.com/exif-js/exif-js (specifically, with this one, I ran into the error of  “Uncaught TypeError: Cannot read property ‘getData’ of undefined”).
So I ended up finding a separate function that could get me the orientation:
And rotating the picture from there (only if needed) – and then uploading the contents of the FORM with JavaScript’s “FormData”.

Read the article

Bose 5 soundbar doesn’t work with my TV

I have a pretty new TV, and just got a Bose Soundbar.  Simply plugging it in didn’t work (as, I would have expected).

The solution: there was a setting on my TV for “audio” and I had to change the source of it!

Read the article

MS Access VBA Environ() function not defined

A user was getting an error that the “ENVIRON()” function was not defined.  This is a built-in function, so I was confused at first…

In the VBA code, I went to Tools >> References and I saw that there were some missing libraries.  What happened was, the current user was on MS Office 2010, and someone else opened up the database in a newer version of MS Office.

In the “References” box, I saw that it said “MISSING: Microsoft Excel 15.0” .  MS Office 2010 equates to version 14.0

Access was “smart” enough to upgrade the library that was needed when the other user opened it up in MS Office 2016.  Then when the original user in Office 2010 (Version 14) tried to open it, it couldn’t find the reference (Version 15).

The solution was to update the reference (uncheck the version 15, re-check version 14), and tell users that if they’re using the new version of MS Office, to use a different instance of the database.

Read the article

jQuery Ajax not getting value of textarea/dropdown

I have an inline editing page (with jQuery/Ajax) that I couldn’t get the NEW values of the HTML objects (textarea/dropdowns/etc).

The issue was, the “old” name of the DIV that had the component matched the NEW name of the component.

The solution: ensure the “new” component (that appears) has a NEW ID, not previously loaded in the DOM.

Read the article

Microsoft VBScript runtime error ‘800a0006’ – Overflow: ‘cint’

I have some server-side validation checks (as should you!).  For whole numbers, I surround my data in the CInt() function to convert the value to an integer.  Actually, I have a separate function that I made (to replicate an existing MS Access function) called “nz” that turns a null value into zero…

But I got an “overflow” error and couldn’t figure out why.  The solution: the number I was trying to sanitize was too big: integers can only be up to ~32,000.  I instead changed to use the CLng() function

Read the article

  • 05.13.2017
  • ASP

Clicking a link in MS Word document doesn’t work

Weird issue, I still don’t know what caused it:

I have an MS Word document that has a link (to a website).  The link is to a page on my company’s INTRAnet.  When you click on the link, you’re (somehow) first brought to an authentication page, which redirects to the final page.  This authentication page was giving the error.  But if I copied-and-pasted the URL directly into the browser, it worked.  I don’t think that MS Word was adding in additional special characters (causing the error) – but there was something with the browser detecting the source (MS Word vs copy/paste) that determined how the authentication should be processed.

Read the article

ssrs graph label remove arrow

I had an SSRS Graph that had the label, with an arrow, pointing to the part of the graph.  I didn’t want this arrow to be there.

The solution:

Click on the area (NOT the data label), go to Properties

  • Labels >> Smart labels >> CalloutLineAnchor >> None
  • Labels >> Smart labels >> Disabled >> true

Read the article

Apple App Store Rejection: iPhone resolution doesn’t run on iPad

My app was rejected from the Apple App Store with the following reason:

We also noticed that your app did not run at iPhone resolution when reviewed on iPad running iOS 10.3.1. Specifically, your app is not optimized for iPad.

They included a picture, but it wasn’t much help.  It wasn’t until that I viewed my app on the iPad 12.9″ screen simulator did I notice that the images were a little blurry.

My app is comprised of a website being displayed in an app “shell.”  With the retina screens, images will appear blurry if not resized correctly.  Ideally you’d upload 2 versions of a picture; the regular and then one of higher quality.  My app is based on users uploading pictures, so I decided to cut the image in half.

The solution: have a CSS media query that, if the device is using a Retina display, resize it to 1/2 of the image width (not specifying a height will make it proportional).

 

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
img {
width:50%;
}
}

UPDATE:

I had explicitly stated a height/width for my images (as, you should), but that didn’t help – some were still blurry.  In some cases I removed the height/width (leaving the Bootstrap “responsive” class intact), and for my logo, I was able to use CSS tricks instead of an image.

Read the article

Jquery AutoComplete doesn’t work when in Bootstrap modal

I was correctly getting the JSON data, but the autocomplete part (below the textbox) wasn’t appearing.

The trick is to increase the z-index of it:

<style type=”text/css”>

                                .ui-autocomplete {

                                                z-index: 5000;

                                }

                </style>

Read the article