image-preview-in-canvas v1.0.25

image-preview-in-canvas

一个图片预览的vue插件 for PC端

install

npm install image-preview-in-canvas

use

// main.js
import ImagePreview from 'image-preview-in-canvas';
Vue.use(ImagePreview)

// .vue
<template>
  <div class="hello">
    <h1>Image Preview</h1>
    <div class="image-container">
      <image-preview :url="url" class="image-preview"></image-preview>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  private url: string = 'http://pic.peepic.com/uploads_pic/20190806/3314161/3314161_001.jpg';
}
</script>

<style scoped>
.hello .image-container {
  position: relative; /* 预览图片的位置 必须设置 */
  height: 500px; /* 根据需要可自定义 */
  border: 1px solid red;
}
.hello .image-preview {
  width: 100px; /* 根据需要可自定义 */
}
</style>

preview