moringaman
8/30/2017 - 12:28 AM

Convert Image to base64 from url using canvas and vuejs

Convert Image to base64 from url using canvas and vuejs

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="url">
    <button :disabled="!url.length" @click="generateBase64">Generate base64</button>
    
    <hr>
    
    <div v-show="base64">
      Your image as base64:
      
      <code>
        {{ base64 }}
      </code>
    </div>
    
    <div v-show="error">
      {{ error }}
    </div>
  </div>
<script id="jsbin-javascript">
'use strict';

var vue = new Vue({
  el: '#app',
  data: {
    url: '',
    base64: '',
    error: ''
  },
  methods: {
    generateBase64: function generateBase64() {
      var _this = this;

      var canvas = document.createElement('CANVAS');
      var img = document.createElement('img');
      img.src = this.url;
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        _this.base64 = canvas.toDataURL('image/png');
        canvas = null;
      };

      img.onerror = function (error) {
        _this.error = 'Could not load image, please check that the file is accessible and an image!';
      };
    }
  },
  watch: {
    url: function url() {
      this.base64 = '';
      this.error = '';
    }
  }
});

Vue.config.devtools = false;
</script>



<script id="jsbin-source-javascript" type="text/javascript">let vue = new Vue({
  el: '#app',
  data: {
    url: '',
    base64: '',
    error: ''
  },
  methods: {
    generateBase64 () {
      let canvas = document.createElement('CANVAS')
      let img = document.createElement('img')
      img.src = this.url
      img.onload = () => {
        canvas.height = img.height
        canvas.width = img.width
        this.base64 = canvas.toDataURL('image/png')
        canvas = null
      }
      
      img.onerror = error => {
        this.error = 'Could not load image, please check that the file is accessible and an image!'
      }
    }
  },
  watch: {
    url () {
      this.base64 = ''
      this.error = ''
    }
  }
})

Vue.config.devtools = false</script></body>
</html>
'use strict';

var vue = new Vue({
  el: '#app',
  data: {
    url: '',
    base64: '',
    error: ''
  },
  methods: {
    generateBase64: function generateBase64() {
      var _this = this;

      var canvas = document.createElement('CANVAS');
      var img = document.createElement('img');
      img.src = this.url;
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        _this.base64 = canvas.toDataURL('image/png');
        canvas = null;
      };

      img.onerror = function (error) {
        _this.error = 'Could not load image, please check that the file is accessible and an image!';
      };
    }
  },
  watch: {
    url: function url() {
      this.base64 = '';
      this.error = '';
    }
  }
});

Vue.config.devtools = false;