2019-01-06 08:05:50 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<img v-bind:src="imagePreview" alt="">
|
|
|
|
<input type="file" @change="updatePreview">
|
2019-01-07 17:33:59 +00:00
|
|
|
<canvas ref="originalCanvas"></canvas>
|
|
|
|
<canvas ref="resizedCanvas" width="300" height="300"></canvas>
|
2019-01-06 08:05:50 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Pica from 'pica';
|
2019-01-07 17:33:59 +00:00
|
|
|
import getOrientation from '../lib/imageUtils';
|
2019-01-06 08:05:50 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "FileUploader",
|
|
|
|
data: function(){
|
|
|
|
return {
|
2019-01-06 09:13:40 +00:00
|
|
|
offscreenImage: null,
|
2019-01-07 17:33:59 +00:00
|
|
|
uploadedFile: {
|
|
|
|
name: '',
|
|
|
|
size: 0,
|
|
|
|
type: '',
|
|
|
|
},
|
|
|
|
uploadedImage: {
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
data: [],
|
|
|
|
orientation: 0
|
|
|
|
},
|
2019-01-06 09:13:40 +00:00
|
|
|
imagePreview: '',
|
2019-01-07 17:33:59 +00:00
|
|
|
pica: undefined
|
2019-01-06 09:13:40 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
created: function(){
|
|
|
|
//this.offscreenImage = new Image();
|
|
|
|
const img = new Image();
|
|
|
|
this.offscreenImage = img;
|
|
|
|
|
|
|
|
img.onload = () => {
|
|
|
|
console.log(img);
|
2019-01-07 17:33:59 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
this.pica = Pica();
|
2019-01-06 08:05:50 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-07 17:33:59 +00:00
|
|
|
orientImage(canvas, ctx, orientation) {
|
|
|
|
let width = canvas.width;
|
|
|
|
let height = canvas.height;
|
|
|
|
|
|
|
|
if (!orientation || orientation > 8) return;
|
|
|
|
|
|
|
|
if (orientation > 4) {
|
|
|
|
ctx.canvas.width = height;
|
|
|
|
ctx.canvas.height = width;
|
2019-01-06 09:13:40 +00:00
|
|
|
}
|
2019-01-07 17:33:59 +00:00
|
|
|
|
|
|
|
switch (orientation) {
|
|
|
|
|
|
|
|
case 2:
|
|
|
|
// Horizontal flip
|
|
|
|
ctx.translate(width, 0);
|
|
|
|
ctx.scale(-1, 1);
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 3:
|
|
|
|
// rotate 180 degrees left
|
|
|
|
ctx.translate(width, height);
|
|
|
|
ctx.rotate(Math.PI);
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 4:
|
|
|
|
// Vertical flip
|
|
|
|
ctx.translate(0, height);
|
|
|
|
ctx.scale(1, -1);
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 5:
|
|
|
|
// Vertical flip + rotate right
|
|
|
|
ctx.rotate(0.5 * Math.PI);
|
|
|
|
ctx.scale(1, -1);
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 6:
|
|
|
|
// Rotate right
|
|
|
|
ctx.rotate(0.5 * Math.PI);
|
|
|
|
ctx.translate(0, -height);
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 7:
|
|
|
|
// Horizontal flip + rotate right
|
|
|
|
ctx.rotate(0.5 * Math.PI);
|
|
|
|
ctx.translate(width, -height);
|
|
|
|
ctx.scale(-1, 1);
|
2019-01-06 09:13:40 +00:00
|
|
|
break;
|
2019-01-07 17:33:59 +00:00
|
|
|
|
|
|
|
case 8:
|
|
|
|
// Rotate left
|
|
|
|
ctx.rotate(-0.5 * Math.PI);
|
|
|
|
ctx.translate(-width, 0);
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
2019-01-06 09:13:40 +00:00
|
|
|
}
|
|
|
|
},
|
2019-01-06 08:05:50 +00:00
|
|
|
openUpload() {
|
|
|
|
//
|
|
|
|
},
|
2019-01-06 09:13:40 +00:00
|
|
|
loadImage(file){
|
2019-01-07 17:33:59 +00:00
|
|
|
const ctx = this.$refs.originalCanvas.getContext('2d');
|
2019-01-06 09:13:40 +00:00
|
|
|
let orientation;
|
|
|
|
|
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
//image = new Image();
|
2019-01-06 09:13:40 +00:00
|
|
|
|
|
|
|
// this.offscreenImage.onerror = () => { N.wire.emit('notify', t('err_image_invalid')); };
|
|
|
|
|
|
|
|
this.offscreenImage.onload = () => {
|
2019-01-07 17:33:59 +00:00
|
|
|
this.$refs.originalCanvas.width = this.offscreenImage.width;
|
|
|
|
this.$refs.originalCanvas.height = this.offscreenImage.height;
|
|
|
|
|
|
|
|
this.orientImage(this.$refs.originalCanvas, ctx, this.uploadedImage.orientation);
|
|
|
|
|
|
|
|
let imageWidth = this.$refs.originalCanvas.width;
|
|
|
|
let imageHeight = this.$refs.originalCanvas.height;
|
|
|
|
|
|
|
|
///let canvasCropped = document.createElement('canvas');
|
|
|
|
|
|
|
|
//canvasCropped.width = 500;
|
|
|
|
//canvasCropped.height = 500;
|
|
|
|
|
|
|
|
//let ctxCropped = canvasCropped.getContext('2d');
|
|
|
|
|
|
|
|
//console.log(this.pica);
|
|
|
|
ctx.drawImage(this.offscreenImage, 0, 0, this.offscreenImage.width, this.offscreenImage.height);
|
2019-01-06 09:13:40 +00:00
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
this.pica.resize(this.$refs.originalCanvas, this.$refs.resizedCanvas)
|
|
|
|
.then(() => this.pica.toBlob(this.$refs.resizedCanvas, 'image/jpeg', 90))
|
|
|
|
.then(function (blob) {
|
|
|
|
console.log(blob);
|
|
|
|
})
|
|
|
|
.catch((e) => {
|
|
|
|
console.log(e);
|
|
|
|
//N.wire.emit('notify', t('err_image_invalid'));
|
|
|
|
throw 'CANCELED';
|
|
|
|
});
|
2019-01-06 09:13:40 +00:00
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
//this.resizeImage();
|
2019-01-06 09:13:40 +00:00
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
};
|
2019-01-06 09:13:40 +00:00
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
let reader = new FileReader();
|
2019-01-06 09:13:40 +00:00
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
reader.onloadend = e => {
|
|
|
|
this.uploadedImage.orientation = getOrientation(e.target.result);
|
|
|
|
this.offscreenImage.src = window.URL.createObjectURL(file);
|
|
|
|
};
|
2019-01-06 09:13:40 +00:00
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
reader.readAsArrayBuffer(file);
|
2019-01-06 09:13:40 +00:00
|
|
|
|
|
|
|
},
|
2019-01-06 08:05:50 +00:00
|
|
|
updatePreview(e) {
|
|
|
|
let files = e.target.files;
|
|
|
|
const allowedFiles = ['image/jpeg', 'image/png', 'image/jpg'];
|
2019-01-06 09:13:40 +00:00
|
|
|
//const pica = Pica();
|
2019-01-06 08:05:50 +00:00
|
|
|
|
|
|
|
if (files.length === 0) {
|
|
|
|
console.log('No files were selected');
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!allowedFiles.includes(files[0].type)){
|
|
|
|
console.log(`${files[0].name} is not an image`);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-01-06 09:13:40 +00:00
|
|
|
const file = files[0];
|
|
|
|
this.loadImage(file);
|
2019-01-06 08:05:50 +00:00
|
|
|
|
2019-01-06 09:13:40 +00:00
|
|
|
// let source = document.createElement('canvas');
|
|
|
|
// let dest = document.createElement('canvas');
|
|
|
|
//
|
|
|
|
// source.width = 1600;
|
|
|
|
// source.height = 1600;
|
|
|
|
//
|
|
|
|
// dest.width = 400;
|
|
|
|
// dest.height = 400;
|
2019-01-06 08:05:50 +00:00
|
|
|
|
2019-01-06 09:13:40 +00:00
|
|
|
// const reader = new FileReader();
|
|
|
|
//
|
|
|
|
// reader.onloadend = e => {
|
|
|
|
// //let fileData = new Uint8Array(reader.result);
|
|
|
|
// this.offscreenImage.src = window.URL.createObjectURL(file);
|
|
|
|
//
|
|
|
|
// }
|
2019-01-06 08:05:50 +00:00
|
|
|
|
2019-01-06 09:13:40 +00:00
|
|
|
//reader.onload = (e) => {
|
|
|
|
// this.imagePreview = this.imageData = e.target.result;
|
2019-01-06 08:05:50 +00:00
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
//source.getContext('2d').drawImage(img, cropX, 0, width, img.height);
|
2019-01-06 08:05:50 +00:00
|
|
|
|
|
|
|
|
2019-01-07 17:33:59 +00:00
|
|
|
//pica.resize(this.imagePreview, this.$refs.resizedPreview)
|
|
|
|
// .then(result => console.log('resize done!'));
|
2019-01-06 09:13:40 +00:00
|
|
|
//};
|
2019-01-06 08:05:50 +00:00
|
|
|
|
2019-01-06 09:13:40 +00:00
|
|
|
//reader.readAsDataURL(files[0]);
|
2019-01-06 08:05:50 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
</style>
|