moringaman/index.html

## index.html
<!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>

## jsbin.nukunivivu.js
'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;
	<!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>