1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
---
layout: post
title: Version 2.0 – EXIF rotation in JavaScript
author: matthew
---
FixMyStreet has had a nice multiple image uploader since version 1.8. This uses
multiple `input type=file` fields, progressively enhanced to add
drag'n'drop, image preview, and uploading in the background whilst you fill in
the rest of the form.
<img src="https://cloud.githubusercontent.com/assets/739624/11398421/76c7c856-9378-11e5-9c25-971de271bd0c.gif" alt="">
In version 1.8.4, we
[patched](https://github.com/mysociety/fixmystreet/commit/4023ee86708f825b64e5f10bef31519ebfb0c5f8)
the third party library we use, [dropzone](http://www.dropzonejs.com), to
correctly orient photos in the image preview. We did this by including a
cut-down version of [exif-js](https://github.com/exif-js/exif-js) to read in
the EXIF orientation data, and then make sure we rotated the image as
instructed in JavaScript before drawing the thumbnail preview. The rotation was
accomplished by moving the image so its centre was over (0,0), rotating the
appropriate amount, and then re-translating it back.
<img src="https://cloud.githubusercontent.com/assets/8081877/16151581/b808b924-3495-11e6-8573-5e9828b3fa49.png" alt="" align="right" hspace="8">
For this new version, we had a different bug to fix. If the user had uploaded a
picture, submitted the form, and was shown the form again due to a server side
error of some sort (some validation not caught by client-side validation, for
example, or because you were logging in during the reporting process), the
image for the preview was then being loaded from the server (where it had
already been uploaded), not the client, and not displaying. We
[patched the exif-js library](https://github.com/mysociety/fixmystreet/commit/7684ee064c717722003e920baed08d0230eb0d9e).,
Now, if it is given a URL rather than a data: string, it will go off and fetch
the image so that it can read out the orientation data.
|
