generated-index-music-art-cover.vue

<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>