Remove reading exif from image
Because it says an error when reading canvas and it is already read in Electron
This commit is contained in:
parent
de5f93e0de
commit
4e7f3f42f4
|
@ -84,7 +84,6 @@
|
||||||
"auto-launch": "^5.0.5",
|
"auto-launch": "^5.0.5",
|
||||||
"axios": "1.3.4",
|
"axios": "1.3.4",
|
||||||
"better-sqlite3": "^8.2.0",
|
"better-sqlite3": "^8.2.0",
|
||||||
"blueimp-load-image": "^5.16.0",
|
|
||||||
"electron-context-menu": "^3.6.1",
|
"electron-context-menu": "^3.6.1",
|
||||||
"electron-json-storage": "^4.6.0",
|
"electron-json-storage": "^4.6.0",
|
||||||
"electron-log": "^4.4.8",
|
"electron-log": "^4.4.8",
|
||||||
|
|
|
@ -11,7 +11,6 @@
|
||||||
import { defineComponent, ref, toRefs, watch, computed } from 'vue'
|
import { defineComponent, ref, toRefs, watch, computed } from 'vue'
|
||||||
import { useStore } from '@/store'
|
import { useStore } from '@/store'
|
||||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ImageViewer'
|
import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ImageViewer'
|
||||||
import exifImageUrl from '@/components/utils/exifImageUrl'
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Media',
|
name: 'Media',
|
||||||
|
@ -39,14 +38,6 @@ export default defineComponent({
|
||||||
|
|
||||||
watch(srcRef, async (newSrc, _oldSrc) => {
|
watch(srcRef, async (newSrc, _oldSrc) => {
|
||||||
imageSrc.value = newSrc
|
imageSrc.value = newSrc
|
||||||
if (newSrc && !isMovie() && !isGIF() && !isAudio()) {
|
|
||||||
try {
|
|
||||||
const transformed = await exifImageUrl(newSrc)
|
|
||||||
imageSrc.value = transformed
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const loaded = () => store.dispatch(`TimelineSpace/Modals/ImageViewer/${ACTION_TYPES.LOADED}`)
|
const loaded = () => store.dispatch(`TimelineSpace/Modals/ImageViewer/${ACTION_TYPES.LOADED}`)
|
||||||
|
|
|
@ -13,7 +13,6 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref, toRefs, onMounted, watch } from 'vue'
|
import { defineComponent, ref, toRefs, onMounted, watch } from 'vue'
|
||||||
import exifImageUrl from '@/components/utils/exifImageUrl'
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'FailoverImg',
|
name: 'FailoverImg',
|
||||||
|
@ -30,10 +29,6 @@ export default defineComponent({
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
readExif: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
failoverSrc: {
|
failoverSrc: {
|
||||||
type: String,
|
type: String,
|
||||||
default:
|
default:
|
||||||
|
@ -41,29 +36,16 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { src, readExif, failoverSrc } = toRefs(props)
|
const { src, failoverSrc } = toRefs(props)
|
||||||
const loading = ref<boolean>(false)
|
const loading = ref<boolean>(false)
|
||||||
const originalSrc = ref<string>(src.value)
|
const originalSrc = ref<string>(src.value)
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
if (readExif.value) {
|
originalSrc.value = src.value
|
||||||
try {
|
|
||||||
const transformed = await exifImageUrl(src.value)
|
|
||||||
originalSrc.value = transformed
|
|
||||||
} catch (err) {
|
|
||||||
console.warn(err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(src, async (newSrc, _oldSrc) => {
|
watch(src, async (newSrc, _oldSrc) => {
|
||||||
originalSrc.value = newSrc
|
originalSrc.value = newSrc
|
||||||
if (readExif.value) {
|
|
||||||
try {
|
|
||||||
const transformed = await exifImageUrl(newSrc)
|
|
||||||
originalSrc.value = transformed
|
|
||||||
} catch (err) {}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const failover = () => {
|
const failover = () => {
|
||||||
|
|
|
@ -71,7 +71,7 @@
|
||||||
<font-awesome-icon icon="eye" class="hide" />
|
<font-awesome-icon icon="eye" class="hide" />
|
||||||
</el-button>
|
</el-button>
|
||||||
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
|
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
|
||||||
<FailoverImg :srzc="media.preview_url" :title="media.description" :readExif="true" />
|
<FailoverImg :srzc="media.preview_url" :title="media.description" />
|
||||||
<el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
|
<el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||||
<el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
<el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -67,7 +67,6 @@
|
||||||
:src="media.preview_url ? media.preview_url : originalMessage.account.avatar"
|
:src="media.preview_url ? media.preview_url : originalMessage.account.avatar"
|
||||||
@click="openImage(media.url, mediaAttachments)"
|
@click="openImage(media.url, mediaAttachments)"
|
||||||
:title="media.description"
|
:title="media.description"
|
||||||
:readExif="true"
|
|
||||||
/>
|
/>
|
||||||
<el-tag class="media-label" size="small" v-if="media.type === 'gifv'">GIF</el-tag>
|
<el-tag class="media-label" size="small" v-if="media.type === 'gifv'">GIF</el-tag>
|
||||||
<el-tag class="media-label" size="small" v-else-if="media.type === 'video'">VIDEO</el-tag>
|
<el-tag class="media-label" size="small" v-else-if="media.type === 'video'">VIDEO</el-tag>
|
||||||
|
|
|
@ -1,45 +0,0 @@
|
||||||
import loadImage from 'blueimp-load-image'
|
|
||||||
|
|
||||||
const parseExtension = (url: string) => {
|
|
||||||
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$/)) {
|
|
||||||
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: string): Promise<string> => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const extension = parseExtension(url)
|
|
||||||
if (!extension) {
|
|
||||||
return reject(Error(`url is not image: ${url}`))
|
|
||||||
}
|
|
||||||
loadImage(
|
|
||||||
url,
|
|
||||||
canvas => {
|
|
||||||
if (canvas.type === 'error') {
|
|
||||||
return reject(Error(`can not load image: ${url}`))
|
|
||||||
}
|
|
||||||
const data = canvas.toDataURL(extension)
|
|
||||||
resolve(data)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
canvas: true,
|
|
||||||
meta: true,
|
|
||||||
orientation: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default exifImageUrl
|
|
|
@ -3027,11 +3027,6 @@ bluebird@^3.5.0, bluebird@^3.5.5:
|
||||||
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
|
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
|
||||||
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
|
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
|
||||||
|
|
||||||
blueimp-load-image@^5.16.0:
|
|
||||||
version "5.16.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/blueimp-load-image/-/blueimp-load-image-5.16.0.tgz#16b763f57e6725f8865517bca8eb7c3dc7d41e09"
|
|
||||||
integrity sha512-3DUSVdOtlfNRk7moRZuTwDmA3NnG8KIJuLcq3c0J7/BIr6X3Vb/EpX3kUH1joxUhmoVF4uCpDfz7wHkz8pQajA==
|
|
||||||
|
|
||||||
bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
|
bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
|
||||||
version "4.12.0"
|
version "4.12.0"
|
||||||
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
|
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
|
||||||
|
|
Loading…
Reference in New Issue