vue-image-diff-example1

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 fetchImages (data) {
  return new Promise(function(resolve) {
    for (let i = 0; i < data.length; i++) {
      (function (datum, i) {
        fetch(datum.url)
          .then(response => response.blob())
          .then(res => {
          datum.blob = res
          if (i == data.length - 1) {
            resolve(data)
          }
        })
      }) (data[i], i)
    }
  })
}
    
new Vue({
	el: '.container',
  data: function () {
  	return {
    	data: [],
      options: {
      	style: {
          borderWidth: 3,
          borderColor: [255, 255, 0],
        	showOverlayText: true,
          frameRowCount: 1
        }
      }
    }
  },
  components: {
  	'vue-image-diff': vueImageDiff
  },
  mounted () {
    fetchImages([
      {
        name: 'korea Mountains',
        params: {author: 'fxgsell', license: 'CC BY 2.0'},
        url: 'https://live.staticflickr.com/5081/5223054798_c3fd926b63_c_d.jpg',
        ext: 'jpg'
      },
      {
        name: 'Mt. jiri Korea',
        params: {author: 'Byeong Min Park', license: 'flicker'},
        url: 'https://live.staticflickr.com/5577/15234883386_ffeeb3a263_c_d.jpg',
        ext: 'jpg'
      },
      {
        name: '_SSJ4363',
        params: {author: 'Seungjin Song', license: 'flicker'},
        url: 'https://live.staticflickr.com/1683/24824937304_2d71742e34_c_d.jpg',
        ext: 'jpg'
      }
    ]).then(data => this.data = data)
  }
})