From 9750c49ee8a7ec5efe8d36b0f492c8d1f38fd768 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 12 Jan 2020 23:01:00 +0900
Subject: [PATCH 1/4] refs #1222 Read exif and rotate image in Toot

---
 package-lock.json                             |  5 +++
 package.json                                  |  1 +
 src/renderer/components/atoms/FailoverImg.vue | 44 +++++++++++++------
 src/renderer/components/organisms/Toot.vue    |  7 ++-
 src/renderer/components/utils/exifImageUrl.js | 39 ++++++++++++++++
 5 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/components/utils/exifImageUrl.js

diff --git a/package-lock.json b/package-lock.json
index a2ace6ea..6af8c0aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6232,6 +6232,11 @@
         }
       }
     },
+    "blueimp-load-image": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-2.26.0.tgz",
+      "integrity": "sha512-pL7SYdK9ZxBFmFiEoh91PIYccU9IzytQ8goIUgc+5RW6vYVyvpGRUltefceeoNyLARbF8QXiYimHp6kgjZ/IBg=="
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
diff --git a/package.json b/package.json
index 6c5ed8a5..83b06eb2 100644
--- a/package.json
+++ b/package.json
@@ -170,6 +170,7 @@
     "animate.css": "^3.7.2",
     "auto-launch": "^5.0.5",
     "axios": "^0.19.1",
+    "blueimp-load-image": "^2.26.0",
     "boom": "^7.3.0",
     "deep-extend": "^0.6.0",
     "electron-context-menu": "^0.15.1",
diff --git a/src/renderer/components/atoms/FailoverImg.vue b/src/renderer/components/atoms/FailoverImg.vue
index 9e88b4bb..c769ea75 100644
--- a/src/renderer/components/atoms/FailoverImg.vue
+++ b/src/renderer/components/atoms/FailoverImg.vue
@@ -1,15 +1,18 @@
 <template>
-<img
-  :src="originalSrc"
-  :title="title"
-  :alt="alt"
-  v-on:error="failover"
-  v-on:load="loading = false"
-  :class="loading ? 'loading' : ''"
-  @click="$emit('click')" />
+  <img
+    :src="originalSrc"
+    :title="title"
+    :alt="alt"
+    v-on:error="failover"
+    v-on:load="loading = false"
+    :class="loading ? 'loading' : ''"
+    @click="$emit('click')"
+  />
 </template>
 
 <script>
+import exifImageUrl from '@/components/utils/exifImageUrl'
+
 export default {
   name: 'FailoverImg',
   props: {
@@ -25,24 +28,39 @@ export default {
       type: String,
       default: ''
     },
+    readExif: {
+      type: Boolean,
+      default: false
+    },
     failoverSrc: {
       type: String,
-      default: 'data:image/png;base64,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8uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg=='
+      default:
+        'data:image/png;base64,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8uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg=='
     }
   },
-  data () {
+  data() {
     return {
       loading: true,
       originalSrc: this.src
     }
   },
+  async mounted() {
+    if (this.readExif) {
+      try {
+        const transformed = await exifImageUrl(this.src)
+        this.originalSrc = transformed
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  },
   watch: {
-    src: function (newSrc, _oldSrc) {
+    src: function(newSrc, _oldSrc) {
       this.originalSrc = newSrc
     }
   },
   methods: {
-    failover () {
+    failover() {
       this.originalSrc = this.failoverSrc
     }
   }
@@ -55,7 +73,7 @@ img {
   min-height: 1em;
 
   &.loading {
-    background-image: url("../../assets/images/loading-spinner.svg");
+    background-image: url('../../assets/images/loading-spinner.svg');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 6373d722..25052322 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -77,7 +77,12 @@
               <icon name="eye" class="hide"></icon>
             </el-button>
             <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
-              <FailoverImg :src="media.preview_url" @click="openImage(media.url, mediaAttachments)" :title="media.description" />
+              <FailoverImg
+                :src="media.preview_url"
+                @click="openImage(media.url, mediaAttachments)"
+                :title="media.description"
+                :readExif="true"
+              />
               <el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
               <el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
             </div>
diff --git a/src/renderer/components/utils/exifImageUrl.js b/src/renderer/components/utils/exifImageUrl.js
new file mode 100644
index 00000000..9733efe7
--- /dev/null
+++ b/src/renderer/components/utils/exifImageUrl.js
@@ -0,0 +1,39 @@
+import loadImage from 'blueimp-load-image'
+
+const parseExtension = url => {
+  if (url.match(/\.jpg$/) || url.match(/\.jpeg$/) || url.match(/\.JPG$/) || url.match(/\.JPEG$/)) {
+    return 'image/jpeg'
+  } else if (url.match(/\.png$/) || url.match(/\.PNG$/)) {
+    return 'image/png'
+  } else if (url.match(/\.gif$/) || url.match(/\.GIF$/)) {
+    return 'image/gif'
+  } else if (url.match(/\.webp$/) || url.match(/\.WEBP$/)) {
+    return 'image/webp'
+  } else if (url.match(/\.svg$/) || url.match(/\.SVG$/)) {
+    return 'image/svg+xml'
+  }
+  return null
+}
+
+const exifImageUrl = url => {
+  return new Promise((resolve, reject) => {
+    const extension = parseExtension(url)
+    if (!extension) {
+      reject(Error('url is not image'))
+    }
+    loadImage(
+      url,
+      canvas => {
+        const data = canvas.toDataURL(extension)
+        resolve(data)
+      },
+      {
+        canvas: true,
+        meta: true,
+        orientation: true
+      }
+    )
+  })
+}
+
+export default exifImageUrl

From 854482511c204011e893e1c7fed7bf8a88947184 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 12 Jan 2020 23:08:00 +0900
Subject: [PATCH 2/4] refs #1222 Read exif and rotate image when the image is
 replaced in FailoverImg

---
 src/renderer/components/atoms/FailoverImg.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/atoms/FailoverImg.vue b/src/renderer/components/atoms/FailoverImg.vue
index c769ea75..15e9b371 100644
--- a/src/renderer/components/atoms/FailoverImg.vue
+++ b/src/renderer/components/atoms/FailoverImg.vue
@@ -55,8 +55,16 @@ export default {
     }
   },
   watch: {
-    src: function(newSrc, _oldSrc) {
+    src: async function(newSrc, _oldSrc) {
       this.originalSrc = newSrc
+      if (this.readExif) {
+        try {
+          const transformed = await exifImageUrl(newSrc)
+          this.originalSrc = transformed
+        } catch (err) {
+          console.error(err)
+        }
+      }
     }
   },
   methods: {

From 3fd6547afb8b52777d8faa2e2970534040fade8e Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 12 Jan 2020 23:12:55 +0900
Subject: [PATCH 3/4] refs #1222 Read exif and rotate image in Notifications

---
 src/renderer/components/organisms/Notification/Favourite.vue | 2 +-
 src/renderer/components/organisms/Notification/Reblog.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/organisms/Notification/Favourite.vue b/src/renderer/components/organisms/Notification/Favourite.vue
index aece0b69..d61989fe 100644
--- a/src/renderer/components/organisms/Notification/Favourite.vue
+++ b/src/renderer/components/organisms/Notification/Favourite.vue
@@ -83,7 +83,7 @@
                 <icon name="eye" class="hide"></icon>
               </el-button>
               <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
-                <FailoverImg :src="media.preview_url" :title="media.description" />
+                <FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
                 <el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
                 <el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
               </div>
diff --git a/src/renderer/components/organisms/Notification/Reblog.vue b/src/renderer/components/organisms/Notification/Reblog.vue
index 7703dae7..19660f67 100644
--- a/src/renderer/components/organisms/Notification/Reblog.vue
+++ b/src/renderer/components/organisms/Notification/Reblog.vue
@@ -85,7 +85,7 @@
                 <icon name="eye" class="hide"></icon>
               </el-button>
               <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
-                <FailoverImg :src="media.preview_url" :title="media.description" />
+                <FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
                 <el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
                 <el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
               </div>

From 5fe150cd945fbf9c5c88269a4920cbecc9749cb5 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 12 Jan 2020 23:35:37 +0900
Subject: [PATCH 4/4] refs #1222 Read exif and rotate image in ImageViewer

---
 .../components/TimelineSpace/Modals/Media.vue | 21 ++++++++++++++++++-
 src/renderer/components/utils/exifImageUrl.js |  5 ++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals/Media.vue b/src/renderer/components/TimelineSpace/Modals/Media.vue
index 605529de..e8adb3a0 100644
--- a/src/renderer/components/TimelineSpace/Modals/Media.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Media.vue
@@ -2,12 +2,13 @@
   <div id="current-media" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
     <video :src="src" v-if="isMovieFile()" autoplay loop controls v-on:loadstart="loaded()"></video>
     <video :src="src" v-else-if="isGIF()" autoplay loop v-on:loadstart="loaded()"></video>
-    <img :src="src" v-else v-on:load="loaded()" />
+    <img :src="imageSrc" v-else v-on:load="loaded()" />
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import exifImageUrl from '@/components/utils/exifImageUrl'
 
 export default {
   props: {
@@ -20,6 +21,24 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      imageSrc: this.src
+    }
+  },
+  watch: {
+    src: async function(newSrc, _oldSrc) {
+      this.imageSrc = newSrc
+      if (newSrc && !this.isMovieFile() && !this.isGIF()) {
+        try {
+          const transformed = await exifImageUrl(newSrc)
+          this.imageSrc = transformed
+        } catch (err) {
+          console.error(err)
+        }
+      }
+    }
+  },
   computed: {
     ...mapState({
       loading: state => state.TimelineSpace.Modals.ImageViewer.loading
diff --git a/src/renderer/components/utils/exifImageUrl.js b/src/renderer/components/utils/exifImageUrl.js
index 9733efe7..22e9f91f 100644
--- a/src/renderer/components/utils/exifImageUrl.js
+++ b/src/renderer/components/utils/exifImageUrl.js
@@ -1,6 +1,9 @@
 import loadImage from 'blueimp-load-image'
 
 const parseExtension = url => {
+  if (!url) {
+    return null
+  }
   if (url.match(/\.jpg$/) || url.match(/\.jpeg$/) || url.match(/\.JPG$/) || url.match(/\.JPEG$/)) {
     return 'image/jpeg'
   } else if (url.match(/\.png$/) || url.match(/\.PNG$/)) {
@@ -19,7 +22,7 @@ const exifImageUrl = url => {
   return new Promise((resolve, reject) => {
     const extension = parseExtension(url)
     if (!extension) {
-      reject(Error('url is not image'))
+      reject(Error(`url is not image: ${url}`))
     }
     loadImage(
       url,