vue-cropperjs-ex

vue-copperjs-ex

Desc

a vue copper component based on cropperjs

Usage

Install

npm install vue-copperjs-ex --save

ES6

import { Copper } from "../dist/vue-cropper.common";

import "vue-cropperjs-ex/dist/css/cropper.min.css"
export default {
  data() {
    return {
      src: "./image.png",
      imgsrc: "",
    };
  },
  mounted() {
    const $this = this;
    this.$refs.file.addEventListener(
      "change",
      function () {
        $this.readFile(this.files[0]).then((rs) => {
          $this.src = rs;
        });
      },
      false
    );
  },
  methods: {
    confirm(url,blob) {
      //this is the image after copper
      this.imgsrc = url;
    },
    readFile(fileObj) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        if (fileObj) {
          reader.readAsDataURL(fileObj);
        }
        reader.addEventListener("load", (_) => resolve(reader.result), false);
      });
    },
  },
  components: {
    Copper,
  },
};

Props

Property	Description
src	the path of the image ,might be a repative path or an image from CDN
confirm	trigger when the click the confirm button

Contribution

License

MIT