更新gulp

build/gulpfile.js

@@ -155,7 +155,7 @@ gulp.task('default', (callback) => {
 gulp.task('watch', () => {
     gulp.watch([
         resolvePath(`${SOURCE_ROOT_PATH}/**/*.js`),
-        resolvePath(`${SOURCE_ROOT_PATH}/**/*.css`),
+        resolvePath(`${SOURCE_ROOT_PATH}/**/*.styl`),
         resolvePath('build/**/*.js'),
         resolvePath('test/**/*.js'),
     ], ['default']);

dist/image-process.css

@@ -1,3 +1,97 @@
 .hidden {
   display: none;
 }
+.img-clip {
+  position: relative;
+  width: 95%;
+  margin: 0 auto;
+  padding: 0;
+}
+.img-clip canvas {
+  display: block;
+}
+.img-clip .magnifier {
+  position: absolute;
+  top: -90px;
+  right: 0;
+/**
+         * 显示的值，真实的宽高内部会设置
+         */
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+.img-clip .clip-hidden {
+  display: none;
+}
+.img-clip .clip-rect {
+  position: absolute;
+  border: 1px dashed #de3c50;
+  top: 10px;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+}
+.img-clip .clip-rect .clip-tips {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  padding: 5px;
+  font-size: 13px;
+  background-color: #333;
+  border-radius: 5px;
+  color: #fff;
+}
+.img-clip .clip-rect-horn {
+  position: absolute;
+  display: block;
+  background-color: rgba(222,60,80,0.7);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+}
+.img-clip .horn-n {
+  top: -10px;
+  left: 50%;
+  margin-left: -10px;
+  cursor: n-resize;
+}
+.img-clip .horn-s {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  cursor: s-resize;
+}
+.img-clip .horn-w {
+  top: 50%;
+  left: -10px;
+  margin-top: -10px;
+  cursor: w-resize;
+}
+.img-clip .horn-e {
+  top: 50%;
+  right: -10px;
+  margin-top: -10px;
+  cursor: e-resize;
+}
+.img-clip .horn-nw {
+  top: -10px;
+  left: -10px;
+  cursor: nw-resize;
+}
+.img-clip .horn-ne {
+  top: -10px;
+  right: -10px;
+  cursor: ne-resize;
+}
+.img-clip .horn-sw {
+  bottom: -10px;
+  left: -10px;
+  cursor: sw-resize;
+}
+.img-clip .horn-se {
+  bottom: -10px;
+  right: -10px;
+  cursor: se-resize;
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-process",
   "version": "0.0.1",
-  "description": "图像处理算法，包括缩放算法(最邻近插值，双线性差值，三次卷积插值)，图像处理（灰度，模糊，锐化，卡通），应用（边缘识别，水印）等",
+  "description": "图像裁剪，图像缩放(最邻近插值，双线性差值，三次卷积插值)，图像滤镜（灰度，模糊，锐化，卡通），应用（边缘识别，水印）等",
   "homepage": "https://github.com/dailc/image-process",
   "repository": {
     "type": "git",

src/styl/index.styl

@@ -1 +1,3 @@
-@import "./common.styl"
+@import "./common.styl"
+
+@import "../clip/styl/index.styl"