vue-image-diff-example2

by whwnsdlr1

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue-image-diff"></script>
<body>
  <div class="container">
    <vue-image-diff :data=data :options=options />
  </div>
</body>

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

JavaScript

function fetchBlob(url) {
  return new Promise(function(resolve) {
    fetch(url)
      .then(response => response.blob())
      .then(res => {
      	resolve(res)
    	})
  })
}

function getBlurBlob(blob, radius) {
  return new Promise(function(resolve) {
  	url = URL.createObjectURL(blob)
    img = new Image()
    img.onload = function () {
    	URL.revokeObjectURL(this.src)
    	c = document.createElement('canvas')
      c.width = img.width
      c.height = img.height
      if (radius > 0)
      	c.getContext('2d').filter = 'blur(' + radius +'px)';
      c.getContext('2d').drawImage(this, 0, 0)
      c.toBlob(function (blob) {
      	resolve(blob)
      }, 'image/jpeg')
		}
    
    img.src = url
  })
}

new Vue({
  el: '.container',
  data: function() {
    return {
      data: [],
      options: {
        diff: {
          activate: true,
          opacity: 0.4,
          tolerance: 20,
          reference: {
          	id: 'id-1'
          }
        },
        style: {
          borderWidth: 1,
          showOverlayText: true,
          frameRowCount: 2
        }
      }
    }
  },
  components: {
    'vue-image-diff': vueImageDiff
  },
  async mounted() {
  	const blob = await fetchBlob('https://live.staticflickr.com/3774/9350214969_7f1fd5ec85_w_d.jpg')
    const blurBlob0 = await getBlurBlob(blob, 0)
    const blurBlob1 = await getBlurBlob(blob, 3)
    const blurBlob2 = await getBlurBlob(blob, 6)
    const blurBlob3 = await getBlurBlob(blob, 9)
    this.data = [
    	{
      	id: 'id-0',
        name: '新垣结衣',
        params: {
          author: 'vespa Ye',
          license: 'flicker'
        },
        blob: blurBlob0,
        ext: 'jpg'
      },
      {
      	id: 'id-1',
        name: '新垣结衣',
        params: {
          author: 'vespa Ye',
          license: 'flicker',
          blur: '3px'
        },
        blob: blurBlob1,
        ext: 'jpg'
      },
      {
      	id: 'id-2',
        name: '新垣结衣',
        params: {
          author: 'vespa Ye',
  ...