jk-image-editor

A image editor.

Installation

注：本插件依赖到了 element-ui ，使用前请先下载 element-ui （附：element-ui 官方文档）

npm install jk-image-editor --save

Usage examples

引入 vue 组件：

<image-editor></image-editor>

import ImageEditor from "jk-image-editor/layout/common";

export default {
  components: {
    ImageEditor
  }
};

也可使用自定义框架，本插件提供图片预览与下载的方法： 引入 vue 组件：

<el-button @click="previewImage">图片预览</el-button>
<el-button @click="downloadImage">下载图片</el-button>
<image-editor
  ref="imageEditor"
  :width="`${width}px`"
  :height="`${height}px`"
  :background-color="backgroundColor"
>
  <template v-slot:editor-content></template>
</image-editor>

import ImageEditor from "jk-image-editor";

export default {
  components: {
    ImageEditor
  },
  data() {
    return {
      width: "500",
      height: "700",
      backgroundColor: "rgba(255, 255, 255, 0)"
    };
  },
  methods: {
    previewImage() {
      this.$refs["imageEditor"].previewImage();
    },
    downloadImage() {
      this.$refs["imageEditor"].downloadImage();
    }
  }
};

Plugin list

• html2canvas

License

MIT

Copyright (c) 2020-present zhuhuajian