meme creator vuejs

index.html

<div id="app">
  <div>
    <input type="file" id="fileinput" @change="onFileChange">  
  </div>
  <div>
    <label for="topText">Top Text:</label>
    <input type="text" v-model="topText" class="form-control" />
  </div>
  
  <div >
    <label for="bottomText">Bottom Text:</label>
    <input type="text" v-model="bottomText" class="form-control" />
  </div>
  
  <canvas ref="canvas" id= "canvas"></canvas>
</div>

meme-creator-vuejs.markdown

meme creator vuejs

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

new Vue({
  data(){
    return{
      topText: '',
      bottomText: ''
    }
  },
  methods:{
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage(file) {
      var vm = this;
      
      
      var reader = new FileReader(); 
      var image = new Image();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        
        
        image.onload = (ev) => {
          var canvas = this.$refs.canvas;
          canvas.width = image.width;
          canvas.height = image.height;
          var ctx = canvas.getContext('2d');
          ctx.clearRect(0, 0,canvas.height, canvas.width)
          ctx.drawImage(image,0,0);
          var e = (canvas.width + canvas.height) / 2 * 4 / 100;
          ctx.font = e + "pt sans-serif"
          ctx.textAlign = "center"
          ctx.textBaseline = "top"
          ctx.lineWidth = e / 5
          ctx.strokeStyle = "black"
          ctx.fillStyle = "white"
          ctx.lineJoin = "round";
          var t = vm.topText.toUpperCase(),
              n = vm.bottomText.toUpperCase();
          ctx.strokeText(t, canvas.width / 2, .05 * canvas.height)
          ctx.fillText(t, canvas.width / 2, .05 * canvas.height)
          ctx.strokeText(n, canvas.width / 2, .9 * canvas.height)
          ctx.fillText(n, canvas.width / 2, .9 * canvas.height)
        }
        image.src = e.target.result;
      };
    }, 
    
  }
}).$mount('#app')

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>