【cropperjs】优秀、优雅的前端图片裁剪库

cropperjs下载

npm i cropperjs

npm官网- https://www.npmjs.com/package/cropperjs

---

cropperjs关键参数

• aspectRatio 图片裁剪比例
  • 默认值 ：NaN
  • 作用：图片裁剪比例
  • 值：自定义裁剪比例，例如1 / 1 , 4 / 3 , 16 / 9等

    ---

    • viewMode 裁剪模式
      • 默认值：0
      • 值：
        • 0：无限制
        • 1：限制裁剪框不超过画布的大小。
        • 2：限制画布的最小大小以适应容器。如果画布和容器的比例不同，最小画布将在其中一个维度上被额外的空间包围。
        • 3：限制画布的最小尺寸以填充容器。如果画布和容器的比例不同，则容器将无法在其中一个维度中容纳整个画布。
        • 定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以扩展到画布之外，而值为1、2或3则会将裁剪框限制为画布的大小。viewMode为2或3时，将额外将画布限制为容器。当画布和容器的比例相同时，2和3之间没有区别。

          ---

          • dragMode 裁剪器的拖动模式
            • 默认值：crop
            • 值
              • crop：创建新的裁剪框，将裁剪的区域外删除
              • move：移动画布，裁剪的同时，可拖动图片
              • none：什么也不做，不可拖动图片

                ---

                cropperjs常用方法

                • ready([ev])
                  • 类型：函数
                  • 作用：cropperjs加载完成执行该方法
                  • 用作场景：当cropperjs加载完成，可在该方法里获取图片数据。例：cropperjs加载完成，获取第一次裁剪完成的图片数据

                    ---

                    • cropend(callback([ev]))
                      • 类型：函数
                      • 作用：鼠标/手指抬起事件，当裁剪完图片时。可在该事件函数里对图片操作，例如将图片转为png,jpg等操作

                        ---

                        • getCroppedCanvas()
                          • 作用： 获取已裁剪的cnavas图片数据
                          • 类型：函数
                          • 例↓

                            cropper.getCroppedCanvas()
                            

                            ---

                            • setAspectRatio(rt)
                              • 类型：函数
                              • 作用：设置cropperjs实例的裁剪比例
                              • 参数：
                                • rt：裁剪比例
                                  • 类型：Number
                                  • 例：cropper.setAspectRatio(16 / 9)

                                    ---

                                    • replace(url, [hasSameSize])
                                      • 作用：设置新裁剪的图片url
                                      • 类型：函数
                                      • 参数：
                                        • url：替换图片的url
                                        • hasSameSize：如果新图像的大小与旧图像的大小相同，那么它将不会重建cropper，而只更新所有相关图像的URL。这可用于应用过滤器。
                                        • 例：cropperjs.replace('/public/123.png')

                                          ---

                                          vue里封装cropperjs组件

                                          • 监听props的作用
                                            • 改变父级参数，实时改变cropper设置

                                              src/components/cropperjs.vue

                                              简单使用cropperjs组件

                                              src/views>HomeView.vue

                                              效果图

                                              ---

                                              base64转文件对象File

                                              • 当图片裁剪后需转file对象上传服务器时↓

                                                base64转文件对象File

                                              • 备用地址 - http://t.csdn.cn/jQ1A5