Last active
May 26, 2022 17:23
-
-
Save MoeRayo/1d3f6ea4292305198bc9fe3cee06a15b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="bg-washed-green vh-100 ph3 ph5-ns"> | |
<header class="tc pv3"> | |
<!-- Header content --> | |
</header> | |
<section class="flex flex-wrap justify-between"> | |
<div class="w-100 w-50-ns tc tl-ns br b--black-50"> | |
<h2 class="calisto fw1 f4-ns f3">Create image</h2> | |
<h3 class="calisto fw1 f6 black-80">Select an image</h3> | |
<!-- rendered images --> | |
<div class="mv4 cb"> | |
<div class="mb3"> | |
<!-- form content --> | |
</div> | |
<div> | |
<h2 class="calisto fw1 f5 underline">Generated Image Result</h2> | |
<div v-if="showImage" class="mt-10 dn"> | |
<GeneratedImageCover ref="cover" | |
:text="text" | |
:public-id="publicId" | |
/> | |
</div> | |
<p v-if="showProgress" class="black-80 tc i">image loading...</p> | |
<section v-if="results && results.secure_url"> | |
<img :src="results.secure_url" :alt="results.public_id" class="mv3" /> | |
</section> | |
</div> | |
</div> | |
</div> | |
<div class="w-100 w-50-ns tc tl-ns pl4"> | |
<h2 class="calisto fw1 f4-ns f3 ">Apply neural style transfer</h2> | |
<h3 class="calisto fw1 f6 black-80">Select an Album</h3> | |
<!-- rendered images --> | |
</div> | |
</section> | |
</div> | |
</template> | |
<script> | |
// imported images here | |
export default { | |
data() { | |
return { | |
//data | |
preset: "***", | |
showImage: false, | |
tags: "music-art-cover", | |
fileContents: null, | |
formData: null, | |
showProgress: false, | |
file: null, | |
results: null, | |
img: null, | |
dataUrl: null | |
} | |
}, | |
methods: { | |
selectImage(imageId, publicId) { | |
//method code goes here | |
}, | |
selectAlbum(albumId, publicId) { | |
//method code goes here | |
}, | |
prepareFormData() { | |
this.formData = new FormData(); | |
this.formData.append("upload_preset", this.preset); | |
this.formData.append("tags", this.tags); // Optional - add tag for image admin in Cloudinary | |
this.formData.append("file", this.fileContents); | |
}, | |
getBase64Image(url) { | |
this.img = new Image(); | |
this.img.setAttribute('crossOrigin', 'anonymous'); | |
this.img.onload = () => { | |
const canvas = document.createElement("canvas"); | |
canvas.width = this.img.width; | |
canvas.height = this.img.height; | |
const ctx = canvas.getContext("2d"); | |
ctx.drawImage(this.img, 0, 0); | |
this.dataURL = canvas.toDataURL("image/png"); | |
this.fileContents = this.dataURL | |
} | |
this.img.src = url | |
}, | |
upload () { | |
if (!this.imageId || this.text === '') { | |
this.error = true | |
} else { | |
this.showImage = true | |
} | |
this.$nextTick(() => { | |
this.getBase64Image(this.$refs.cover.$refs.ref.$el.src) | |
}); | |
setTimeout(() => { | |
this.prepareFormData(); | |
const cloudinaryUploadURL = `https://api.cloudinary.com/v1_1/${this.cloudName}/upload`; | |
const requestObj = { | |
url: cloudinaryUploadURL, | |
method: "POST", | |
data: this.formData, | |
}; | |
this.showProgress = true; | |
this.$axios(requestObj) | |
.then(response => { | |
this.results = response.data; | |
}) | |
.catch(error => { | |
return error | |
}).finally(() => { | |
this.showProgress = false; | |
}) | |
}, 3000); | |
} | |
} | |
} | |
</script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment