在我的移动应用中,我正在拍摄一张表单,并且我试图使用smartCrop.js从图片中裁剪表单。 smartCrop返回的结果并不是边缘所在的确切宽度,高度,x,y坐标。
如果可能的话,我想完美地裁剪表格。
我看到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;
});
}