前端开发感想之发现一个新大陆

项目背景：公司某个项目需要开发一个图片编辑工具，类似于一个web版本的迷你型ps工具

只给我一个产品模型，来完成前端开发，一直是做后台开发，表示压力山大。看着自己写的，每一行代码，每一个方法，纯手工打造的产品，感想颇深。

今天我们来谈谈图片剪辑插件cropperjs，这个插件功能强大，用起来很方便，遇到的坑就是，

1.vue版本的是cropperjs，如果你的是jsp引用js那种使用cropper，我也是用了才发现；

2.vue版本方法有区别，按照它的api进行使用，初始化这个插件之后，不能再初始化，需要判断，插件初始化了没有，代码如下

if (this.cropper == "") {
          //显示操作按钮
          this.showCropBtn = true;
          //初始化切图插件
          var image = document.getElementById("test123");
          this.cropper = new Cropper(image, {
            ready() {
              //this.cropper.clear();

            },
          });
        }

//取消操作
      cropCancel() {
        this.showCropBtn = false;
        this.cropper.destroy();
        this.cropper = "";
      },

取消操作就要把这个变为空。

3.vue文件如何引用这个插件的js和css文件

原来vue里面可以直接引用css，当时对我来说不可思议

效果图如下：

这个插件剪切和旋转按钮区分不大，感觉不是自己想要的，以及这个历史记录悬浮框，带移动的也需要调整