lbry.tech/content/.vuepress/components/Step2.vue

<template>
  <section class="hook__page" id="step2-page">

    <div v-images-loaded="imagesLoaded">
      <header class="hook__page__hero">
        <div class="inner-wrap">
          <h1>Publish your content on the blockchain</h1>
          <p>Upload an image to the blockchain and you are able to view it on the <a href="http://explorer.lbry.io" title="LBRY Blockchain Explorer" target="_blank">LBRY Blockchain Explorer</a>.</p>
        </div>
      </header>

      <aside class="hook__page__content">
        <div class="inner-wrap">

          <div class="hook__page__content__meme left">
            <img v-bind:src="backgroundImage" id="base-image" alt="" />
            <canvas id="meme-canvas" width="400" height="300">Sorry, canvas not supported</canvas>

            <img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="thumbnail" v-bind:class="{'selected': backgroundImage == image.src}" v-bind:alt="image.alt">

          </div>

          <form class="hook__page__content__meme right">

            <h2>Image Text</h2>

            <fieldset>
              <label for="meme-top-line">Top line</label>
              <input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
            </fieldset>

            <fieldset>
              <label for="meme-bottom-line">Bottom line</label>
              <input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
            </fieldset>

            <h2 class="metadata">Metadata</h2>

            <fieldset>
              <label for="meme-title">Title</label>
              <input name="meme-title" id="meme-title" type="text" v-model="title" placeholder="Title" required/>
            </fieldset>

            <fieldset>
              <label for="meme-description">Description</label>
              <textarea name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" required>{{ description}}</textarea>
            </fieldset>

            <fieldset>
              <label for="meme-language">Language</label>
              <select name="meme-language" id="meme-language" v-model="language">
                <option value="EN">English</option>
                <option value="FR">French</option>
                <option value="ES">Spanish</option>
                <option value="DE">German</option>
                <option value="IT">Italian</option>
                <option value="ZH">Chinese (Mandarin)</option>
                <option value="AR">Arabic</option>
                <option value="RU">Russian</option>
                <option value="JP">Japanese</option>
                <option value="">Not specified</option>
              </select>
            </fieldset>

            <fieldset>
              <label for="meme-license">License</label>
              <select name="meme-license" id="meme-license" v-model="license" required>
                <option value="Public Domain">Public Domain</option>
                <option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
                <option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
                <option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
                <option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
                <option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
                <option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
                <option value="None">None</option>
              </select>
            </fieldset>

            <fieldset>
              <label><input type="checkbox" v-model="nsfw" name="nsfw"/>NSFW</label>
            </fieldset>

            <fieldset>
              <input type="submit" class="__button-black" v-on:click="submit" value="Submit"/>
            </fieldset>
          </form>

          <div class="xs12" v-if="isLoading">
            <div class="loader"></div>
          </div>

        </div>
      </aside>
    </div>

  </section>
</template>

<script>
import imagesLoaded from 'vue-images-loaded'

import EventBus from '../event-bus';

export default {
  directives: {
    imagesLoaded
  },

  data () {
    var images = [
      {
        src: 'https://spee.ch/4f6b953e605a602434246743fd246d3e1fd4f5fd/carlsagan2.jpeg',
        alt: 'Carl Sagan'
      },
      {
        src: 'https://spee.ch/2f90f2d91441a4d33d3d4eb82bdfc4c56ec742c7/doge-meme.jpeg',
        alt: 'Doge'
      },
      {
        src: 'https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png',
        alt: 'LBRY Logo With Green Background'
      }
    ];
    return {
      valid: false,
      isLoading: false,
      topLine: 'This is an example meme',
      bottomLine: 'that I made',
      title: '',
      description: 'Check out this image I published to LBRY via lbry.tech',
      author: '',
      language: 'EN',
      license: 'Public Domain',
      nsfw: false,
      images: images,
      backgroundImage: images[0].src,
      textFieldRules: [
        v => !!v || 'Field is required'
      ],
    }
  },
  methods: {
    updateCanvas () {
      var canvasWidth = 400;
      var canvasHeight = 300;
      var canvas = document.getElementById('meme-canvas');
      var ctx = canvas.getContext('2d');
      var img = document.getElementById('base-image');

      ctx.clearRect(0, 0, canvasWidth, canvasHeight);

      ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);

      ctx.lineWidth = 4;
      ctx.font = 'bold 28px Karla';
      ctx.strokeStyle = 'black';
      ctx.fillStyle = 'white';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'top';

      ctx.lineJoin = 'round';

      ctx.strokeText(this.topLine.toUpperCase(), canvasWidth / 2, 20);
      ctx.fillText(this.topLine.toUpperCase(), canvasWidth / 2, 20);

      ctx.strokeText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
      ctx.fillText(this.bottomLine.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
    },
    submit () {
      // TODO: Do the upload
      EventBus.$emit('HookFileUploaded', 'txhashhere');
    },
    imagesLoaded (instance) {
      var component = this;
      // Make sure the font is loaded
      document.fonts.load('bold 28px Karla').then(function() {
        component.updateCanvas();
      });
    },
    chooseImage (src) {
      var component = this;
      component.backgroundImage = src;
      component.updateCanvas();
    },
    setImage (file) {
      var component = this;
      document.getElementById('base-image').src = file;
      // allow one second to load the image
      setTimeout(component.updateCanvas, 1000);
    }
  },
  created () {
  },
  watch: {
    topLine () {
      this.updateCanvas();
    },
    bottomLine () {
      this.updateCanvas();
    }
  },
  name: 'Step2'
};
</script>