Merge pull request #3764 from thelounge/xpaw/canvas-upload
Render images in canvas before upload to remove exif
This commit is contained in:
commit
b72e49c902
@ -229,6 +229,29 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</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">
|
<template v-if="!$store.state.serverConfiguration.public">
|
||||||
<h2>Push Notifications</h2>
|
<h2>Push Notifications</h2>
|
||||||
<div>
|
<div>
|
||||||
|
@ -92,6 +92,9 @@ export const config = normalizeConfig({
|
|||||||
media: {
|
media: {
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
uploadCanvas: {
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
userStyles: {
|
userStyles: {
|
||||||
default: "",
|
default: "",
|
||||||
apply(store, value) {
|
apply(store, value) {
|
||||||
|
@ -130,6 +130,48 @@ class Uploader {
|
|||||||
|
|
||||||
uploadNextFileInQueue(token) {
|
uploadNextFileInQueue(token) {
|
||||||
const file = this.fileQueue.shift();
|
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 = new XMLHttpRequest();
|
||||||
|
|
||||||
this.xhr.upload.addEventListener(
|
this.xhr.upload.addEventListener(
|
||||||
|
Loading…
Reference in New Issue
Block a user