Vue.jsで虫眼鏡みたいに画像を拡大してみる「vuejs-magnifier」

by kabanoki

HTML

<div id="app">
  <magnifier 
    src="https://images.unsplash.com/photo-1453831362806-3d5577f014a4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=650&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" 
    :glass-width="150" 
    :glass-height="150"
    :width="650"
    :height="500"
    :zoom-level="3"
  ></magnifier>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/magnifiercomponent.umd.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const Magnifier = window['Magnifier'].default;
Vue.use(Magnifier);
new Vue({
  el: '#app'
});