It‘s a little imperfect that I cannot make a circle crop area?

[zs1843]

firstly,thanks for your nice tools, I've used the crop function, and it works well for my project,either for aot. but the params toHeight，toWidth are not flexible, when I wanna make a circle crop area ,I need to counter the left ,top,toHeight, toWidth relatively, which wasting time.

import {
 Component,
 ElementRef,
 EventEmitter,
 Input,
 OnInit,
 Output,
 Renderer,
 ViewChild,
 ViewEncapsulation,
} from '@angular/core';

import {AuthTokenService} from './../../shared/auth/auth.token.service';
import {CommonService} from './../../shared/common/common.service';
import {DomSanitizer} from '@angular/platform-browser';
import {FileUploader} from 'ng2-file-upload';
import {LocalStorageService} from 'ng2-webstorage';
import {Ng2ImgToolsService} from 'ng2-img-tools';
import {PersonalService} from '../personal.service';
import {PromptComponent} from '../../shared/prompt/prompt.component';
import {Router} from '@angular/router';

declare var jQuery: any;
@Component({
 selector: 'cube-pic-cropper',
 templateUrl: './pic-cropper.component.html',
 styleUrls: ['./pic-cropper.scss'],
 encapsulation: ViewEncapsulation.Emulated,
})

export class PicCropperComponent implements OnInit {

......

// 裁剪
 doCrop() {
     if (!this.dragDiv) {
         return;
     }
     // 获取dragDiv的当前宽度
     this.dragWidth = this.dragDiv.nativeElement.offsetWidth;
     // 获取dragDiv的当前高度
     this.dragHeight = this.dragDiv.nativeElement.offsetHeight;
     // 获取dragDiv相对于父元素的当前top值
     this.dragTop = this.dragDiv.nativeElement.offsetTop;
     // 获取dragDiv相对于父元素的当前left值
     this.dragLeft = this.dragDiv.nativeElement.offsetLeft;
     const imgW = this.newImg ? this.newImg.nativeElement.width : 50;
     const imgH = this.newImg ? this.newImg.nativeElement.height : 50;
     this._parentW = this.mainCrop.nativeElement.offsetWidth;

     this._parentH = this.mainCrop.nativeElement.offsetHeight;
     // 图片相对的点位置
     const cropW = Math.ceil(imgW / this._parentW * this.dragWidth);
     const cropH = Math.ceil(imgH / this._parentH * this.dragHeight);
     const cropY = Math.ceil(imgH / this._parentH * this.dragTop);
     const cropX = Math.ceil(imgW / this._parentW * this.dragLeft);
     if (!this._parentW || !this._parentH) {
         return;
     }
     this.cropImage(this.thisFile, cropW, cropH, cropX, cropY);

 }

 /**
  * 图片裁剪
  * @param {File} file
  * @param {number} endWidth
  * @param {number} endHeight
  * @param {number} startX
  * @param {number} startY
  * @memberOf PicCropperComponent
  */
 cropImage(file: File, endWidth: number, endHeight: number, startX: number, startY: number) {
     this.ng2ImgToolsService.crop([file], endWidth, endHeight, startX, startY).subscribe(result => {
             this.fileData = result;
             this.croppedImage = window.URL.createObjectURL(result);
             this.croppedImageTrusted = this.sanitizer.bypassSecurityTrustUrl(this.croppedImage);
             // 输出裁剪好的图片
             this.outImagePath.emit({fileData: this.fileData, file: this.thisFile, crop: this.croppedImage});
             this.outFilePath.emit(result);
         }, error => {
         }
     );
 }

 getBackImage(value) {
     const imageValue = value;
     return imageValue;
 }

 uploadBlobImg() {
     const fd = new FormData();
     fd.append('file', this.fileData);
     fd.append('_fileName', this.thisFile.name);
     this._CommonService.uploadImage(fd).subscribe(data => {
         if (data.returnCode === '2000') {
             const ImageBackUrl = data.data[0].url;
             this.getBackImage(ImageBackUrl);
             this.updateImage(ImageBackUrl);
         }
     });
 }



 clearFile() {
     this.croppedImage = null;
     this.croppedImageTrusted = 'assets/img/info.png';
 }
}

[bergben]

Hi @zs1843,
I am not sure if I understand what you mean... For a rounded image I would suggest to use CSS, not to crop the image itself. I don't know what kind of application you are building but if you are storing the images and maybe in a few years you'd like to change the images not to be rounded anymore, you can't do so without cropping them again and losing parts of the image.

You can easily create rounded images like so: https://www.abeautifulsite.net/how-to-make-rounded-images-with-css

If you mean that the part that is rounded is not displayed because it is cropped to tight, then yes you'll simply have to calculate the additional border yourself and pass that as toWidth and toHeight...

I hope this helps? :)

[zs1843]

I know what you mean, but the demand is so determined, they want the interception area and the interception result to look the same，ok , I will try , thank you.