Render uploaded images in canvas to remove exif
This commit is contained in:
parent
56dfa5ef40
commit
b14a8a267a
@ -229,6 +229,29 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="$store.state.settings.advanced && $store.state.serverConfiguration.fileUpload"
|
||||
>
|
||||
<h2>File uploads</h2>
|
||||
<div>
|
||||
<label class="opt">
|
||||
<input
|
||||
:checked="$store.state.settings.uploadCanvas"
|
||||
type="checkbox"
|
||||
name="uploadCanvas"
|
||||
/>
|
||||
Attempt to remove metadata from images before uploading
|
||||
<span
|
||||
class="tooltipped tooltipped-n tooltipped-no-delay"
|
||||
aria-label="This option renders the image into a canvas element to remove metadata from the image.
|
||||
This may break orientation if your browser does not support that."
|
||||
>
|
||||
<button class="extra-help" />
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="!$store.state.serverConfiguration.public">
|
||||
<h2>Push Notifications</h2>
|
||||
<div>
|
||||
|
@ -92,6 +92,9 @@ export const config = normalizeConfig({
|
||||
media: {
|
||||
default: true,
|
||||
},
|
||||
uploadCanvas: {
|
||||
default: true,
|
||||
},
|
||||
userStyles: {
|
||||
default: "",
|
||||
apply(store, value) {
|
||||
|
@ -130,6 +130,48 @@ class Uploader {
|
||||
|
||||
uploadNextFileInQueue(token) {
|
||||
const file = this.fileQueue.shift();
|
||||
|
||||
if (
|
||||
store.state.settings.uploadCanvas &&
|
||||
file.type.startsWith("image/") &&
|
||||
!file.type.includes("svg")
|
||||
) {
|
||||
this.renderImage(file, (newFile) => this.performUpload(token, newFile));
|
||||
} else {
|
||||
this.performUpload(token, file);
|
||||
}
|
||||
}
|
||||
|
||||
renderImage(file, callback) {
|
||||
const fileReader = new FileReader();
|
||||
|
||||
fileReader.onabort = () => callback(file);
|
||||
fileReader.onerror = () => fileReader.abort();
|
||||
|
||||
fileReader.onload = () => {
|
||||
const img = new Image();
|
||||
|
||||
img.onerror = () => callback(file);
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
callback(new File([blob], file.name));
|
||||
}, file.type);
|
||||
};
|
||||
|
||||
img.src = fileReader.result;
|
||||
};
|
||||
|
||||
fileReader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
performUpload(token, file) {
|
||||
this.xhr = new XMLHttpRequest();
|
||||
|
||||
this.xhr.upload.addEventListener(
|
||||
|
Loading…
Reference in New Issue
Block a user