修改图片裁剪

1

src/components/col-cropper/cropper.tsx

@@ -65,7 +65,8 @@ export default defineComponent({
       url: {
         upload: '/sys/common/saveToImgByStr'
       },
-      submitLoading: false
+      submitLoading: false,
+      myCropper:null as any
     }
   },
   methods: {
@@ -86,7 +87,9 @@ export default defineComponent({
      * 确认截图
      */
     okHandel() {
-      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
+      ;(this as any).myCropper.getCroppedCanvas({
+        imageSmoothingQuality: 'high'
+      }).toBlob(async data => {
         this.submitLoading = true
         const options: any = this.options
         const fileName =
@@ -119,7 +122,8 @@ export default defineComponent({
           for (let key in this.dataObj) {
             formData.append(key, this.dataObj[key])
           }
-          formData.append('file', this.blobToFile(data, fileName), fileName)
+          // this.blobToFile(data, fileName)
+          formData.append('file', data, fileName)
           await umiRequest(this.ossUploadUrl, {
             method: 'POST',
             data: formData
@@ -169,6 +173,22 @@ export default defineComponent({
     //向右旋转
     rotateRight() {
       ;(this as any).$refs.cropperRef.rotateRight()
+    },
+    initImgCropper(){
+      this.myCropper = new Cropper((this as any).$refs.imgCropper, {
+        viewMode: 1, //定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以延伸到画布外部，而值为1、2或3将限制裁剪框的大小为画布的大小。viewMode为2或3会将画布限制为容器。请注意，如果画布和容器的比例相同，则2和3之间没有差别。
+        dragMode: 'move', //定义的拖动模式裁剪器.canvas和容器一样，2和3没有区别。move:移动画布 crop:创建新的裁剪框（默认） none:什么也不做
+        //定义裁剪框的固定纵横比。默认情况下，裁剪框为自由比率。
+        aspectRatio: this.options.autoCropWidth / this.options.autoCropHeight,
+        initialAspectRatio: 1,
+        autoCropArea: 1, //定义0到1之间的fA编号。定义自动裁剪区域大小（百分比）。默认0.8
+        cropBoxMovable: true, //允许通过拖动移动裁剪框。默认true
+        cropBoxResizable: false, //以通过拖动来调整裁剪框的大小 默认true
+        background: false, //显示容器的网格背景
+        movable: true, //移动图像
+        modal: true,
+        preview: '.before'
+      })
     }
   },
   render() {
@@ -180,6 +200,8 @@ export default defineComponent({
         title={this.options.title}
         closeOnClickModal={false}
         width={'900px'}
+        destroyOnClose={true}
+        onOpened={()=>{this.initImgCropper()}}
         v-slots={{
           footer: () => (
             <span class="dialog-footer !text-center block">
@@ -202,7 +224,10 @@ export default defineComponent({
       >
         <ElRow>
           <ElCol xs={24} md={12} style={{ width: '350px' }}>
-            <VueCropper
+          <div  class={styles.imgwarp}>
+            <img ref="imgCropper" id="myImages" src={this.options.img} alt="" style={{ height: '350px' }}/>
+          </div>
+            {/* <VueCropper
               ref="cropperRef"
               img={this.options.img}
               info={true}
@@ -216,7 +241,7 @@ export default defineComponent({
               enlarge={this.options.enlarge}
               onRealTime={this.realTime}
               style={{ height: '350px' }}
-            />
+            /> */}
             {/* <div class="flex pt-2">
               <div
                 onClick={() => {
@@ -254,16 +279,16 @@ export default defineComponent({
               <span>预览图片</span>
               <div
                 class={
-                  this.options.previewsCircle
+                  [this.options.previewsCircle
                     ? styles['avatar-upload-preview']
-                    : styles['avatar-upload-preview_range']
+                    : styles['avatar-upload-preview_range'], 'before']
                 }
                 style={{
                   width: this.options.autoCropWidth + 'px',
                   height: this.options.autoCropHeight + 'px'
                 }}
               >
-                <ElImage src={this.previews.url} style={this.previews.img} />
+                {/* <ElImage src={this.previews.url} style={this.previews.img} /> */}
               </div>
             </div>
           </ElCol>

src/components/col-cropper/index.module.less

@@ -83,3 +83,17 @@
     padding-top: 0;
   }
 }
+:global {
+  .before {
+    max-width: 400px !important;
+    max-height: 400px !important;
+    overflow: hidden;
+  }
+}
+
+#myImages {
+  max-width: 400px;
+  display: block;
+  width: 400px;
+  min-height: 400px;
+}