feat: SlimCropper

scripts/release.sh

@@ -0,0 +1,23 @@
+version=$(node -p "const { version } = require('./package.json'); version")
+
+git checkout master
+
+# build
+yarn build
+yarn build:demo
+
+# commit
+git add -A
+standard-version --commit-all --release-as $version
+
+# gh-pages
+git checkout gh-pages
+git merge master
+git checkout master
+
+# push
+git push --tags origin
+git push --all origin
+
+# publish
+npm publish --registry=https://registry.npmjs.org

src/SlimCropper/index.vue

@@ -0,0 +1,151 @@
+/**
+ * vue-slim-cropper
+ * @Author momoko
+ * @Date 2019/07
+ */
+
+<template>
+  <div :class="c()">
+    <img
+      ref="img"
+      :class="c('__img')"
+      :src="src">
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import mixin from './mixins'
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.min.css'
+
+// toBlob polyfill
+if (!HTMLCanvasElement.prototype.toBlob) {
+  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+    value: function (callback, type, quality) {
+      var binStr = atob(this.toDataURL(type, quality).split(',')[1])
+      var len = binStr.length
+      var arr = new Uint8Array(len)
+
+      for (var i = 0; i < len; i++) {
+        arr[i] = binStr.charCodeAt(i)
+      }
+
+      callback(new Blob([arr], { type: type || 'image/png' }))
+    },
+  })
+}
+
+export default {
+  name: 'SlimCropper',
+  mixins: [mixin],
+  props: {
+    src: {
+      // 图片链接
+      type: String,
+      default: undefined,
+    },
+    aspectRatio: {
+      // 宽高比
+      type: Number,
+      default: 1,
+    },
+    cropperOptions: {
+      // cropperjs 配置项，将合并在初始化 cropperjs 的配置中。https://github.com/fengyuanchen/cropperjs
+      type: Object,
+      default: null,
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  watch: {
+    async src (val) {
+      if (val) {
+        if (this.cropper) {
+          this.cropper.replace(val)
+        } else {
+          await this.$nextTick()
+          this.init()
+        }
+      }
+    },
+  },
+  async mounted () {
+    this.cropper = null // cropper 实例
+    if (this.src) {
+      await this.$nextTick()
+      this.init()
+    }
+  },
+  methods: {
+    init () {
+      const options = {
+        viewMode: 1, // 限制裁剪框不超过画布的大小
+        dragMode: 'none', // 移动画布
+        guides: false, // 裁剪框虚线
+        center: false, // 裁剪框中心线
+        background: false, // 容器网格背景
+        autoCropArea: 1, // 初始化裁剪面积
+        toggleDragModeOnDblclick: false, // 裁剪器上单击两次时，可以在“裁剪”和“移动”之间切换拖动模式
+        aspectRatio: this.aspectRatio, // 宽高比
+        ...this.cropperOptions,
+      }
+      this.cropper = new Cropper(this.$refs.img, options)
+    },
+    // 获取裁减后的 file 对象
+    getCroppedBlob (type = 'image/jpeg', quality = 1) {
+      return new Promise((resolve, reject) => {
+        this.cropper.getCroppedCanvas().toBlob((file) => {
+          resolve(file)
+        }, type, quality)
+      })
+    },
+  },
+}
+</script>
+
+<style lang="stylus">
+$ = vue-slim-cropper;
+$color = #fff;
+.{$} {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__img {
+    width: 100%;
+  }
+
+  .cropper-container {
+    .cropper-view-box {
+      outline: 1px solid $color;
+      outline-color: rgba(255, 255, 255, 1);
+    }
+
+    .cropper-line {
+      background-color: $color;
+    }
+
+    .cropper-point {
+      background-color: $color;
+      opacity: 1;
+    }
+
+    .point-e, .point-n, .point-w, .point-s {
+      display: none;
+    }
+
+    .point-ne, .point-nw, .point-sw, .point-se {
+      // width: 30px;
+      // height: 30px;
+      // z-index: -1;
+      opacity: 0.5;
+    }
+  }
+}
+</style>

src/SlimCropper/mixins/index.js

@@ -0,0 +1,11 @@
+import pkg from '../../../package.json'
+const pre = pkg.name
+
+export default {
+  methods: {
+    // 生成 css class
+    c (className) {
+      return className ? `${pre}${className}` : `${pre}`
+    },
+  },
+}

src/index.js

@@ -0,0 +1,7 @@
+import SlimCropper from './SlimCropper'
+
+SlimCropper.install = function (Vue) {
+  Vue.component(SlimCropper.name, SlimCropper)
+}
+
+export default SlimCropper