如何使用smartCrop.js在边缘裁剪

时间:2017-11-15 22:59:05

标签: javascript image-processing canvas crop

在我的移动应用中,我正在拍摄一张表单,并且我试图使用smartCrop.js从图片中裁剪表单。 smartCrop返回的结果并不是边缘所在的确切宽度,高度,x,y坐标。

What I'm getting from smartcrop.js testbed

如果可能的话,我想完美地裁剪表格。

debug result

我看到smartcrop可以检测表单基于绿色轮廓的位置。 一些代码:

useSmartCrop(image: any, cropWidth, cropHeight,x,y){
            return new Promise((resolve,reject)=>{
           let options = {
             x:x,
             y:y,
             width: cropWidth,
             height: cropHeight,
             minScale:0.5,
             debug:true
           }    
           smartcrop.crop(image,options).then((result)=>{
             resolve(result.topCrop);
           })   
         });
        }



 generateCrop(image: any, url?: boolean): Promise<any> {
    return new Promise((resolve, reject) => {
        console.debug('generating crop...');

        let previewCanvas = this.previewCanvas.nativeElement;
        let tempCanvas = document.createElement("canvas");

        // always generate an image of the same size (the one image service expects):
        tempCanvas.width = 2876;
        tempCanvas.height = tempCanvas.width / this.taxForm.aspect;


        let img = new Image();
        img.onload = (() => {
            let ctx = tempCanvas.getContext("2d");
            console.debug('IMG: WIDTH/HEIGHT:', img.width, '/', img.height);
            let imageWidth = img.width;
            let imageHeight = img.height;
            // following settings concerning crop should be same as overlay:
            let imageCenterX = imageWidth / 2;                     // center is half the length.
            let imageCenterY = imageHeight / 2;                    // "
            let cropWidth = imageWidth * 0.85;                     // 0.85 is arbitrary percentage of image height.
            let cropHeight = cropWidth / this.taxForm.aspect;      // aspect is (the taxform + 15px padding)'s aspect ratio.
            let cropHalfHeight = cropHeight / 2;                   // half-length is half the length; 
            let cropHalfWidth = cropWidth / 2;                     // "

            // crop image (should be the part of the image the overlay is over):
            ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);

            this.useSmartCrop(img, cropWidth, cropHeight, imageCenterX-cropHalfWidth, imageCenterY - cropHalfHeight).then((result)=>{
              let topCrop = <any> result;
              console.log('TOPCROP result ' + result);
              if(Object.keys(topCrop).length != 0){
                ctx.drawImage(img, topCrop.x, topCrop.y, topCrop.width, topCrop.height,0,0,tempCanvas.width, tempCanvas.height);  

                let data = null;
                if (url) {
                    data = tempCanvas.toDataURL(); // string: data url to now base-64 encoded crop.
                    this.taxForm.image = data;                       
                }
                else {
                    data = ctx.getImageData(0, 0, tempCanvas.width, tempCanvas.height); // Uint8ClampedArray: rgba pixel data of crop.

                }
                resolve(data);
              }
            })

        });
        img.src = image;     
    }); 
  }

0 个答案:

没有答案