kopia lustrzana https://github.com/msurguy/SquiggleCam
68 wiersze
1.5 KiB
Vue
68 wiersze
1.5 KiB
Vue
![]() |
<template>
|
||
|
<div>
|
||
|
<img v-bind:src="imagePreview" alt="">
|
||
|
<input type="file" @change="updatePreview">
|
||
|
<canvas ref="resizedPreview"></canvas>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import Pica from 'pica';
|
||
|
|
||
|
export default {
|
||
|
name: "FileUploader",
|
||
|
data: function(){
|
||
|
return {
|
||
|
imageData: null,
|
||
|
imagePreview: ''
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
openUpload() {
|
||
|
//
|
||
|
},
|
||
|
updatePreview(e) {
|
||
|
let files = e.target.files;
|
||
|
const allowedFiles = ['image/jpeg', 'image/png', 'image/jpg'];
|
||
|
const pica = Pica();
|
||
|
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
let source = document.createElement('canvas');
|
||
|
let dest = document.createElement('canvas');
|
||
|
|
||
|
source.width = 1600;
|
||
|
source.height = 1600;
|
||
|
|
||
|
dest.width = 400;
|
||
|
dest.height = 400;
|
||
|
|
||
|
const reader = new FileReader();
|
||
|
|
||
|
reader.onload = (e) => {
|
||
|
this.imagePreview = this.imageData = e.target.result;
|
||
|
|
||
|
source.getContext('2d').drawImage(img, cropX, 0, width, img.height);
|
||
|
|
||
|
|
||
|
pica.resize(this.imagePreview, this.$refs.resizedPreview)
|
||
|
.then(result => console.log('resize done!'));
|
||
|
};
|
||
|
|
||
|
reader.readAsDataURL(files[0]);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
|
||
|
</style>
|