我正在使用此功能来定位，调整大小和压缩用户提交的图像。 如果手机拍摄的照片是矩形的。我需要从旋转后裁剪的原始图像中获取正方形图像。怎么做？
function resetOrientationResizeCompress(srcBase64, srcOrientation) {
return new Promise(function (resolve) {
var img = new Image();
img.onload = function () {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
var MAX_WIDTH = 1000;
var MAX_HEIGHT = 1000;
// set proper canvas dimensions before transform & export
if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = height;
canvas.height = width;
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
switch (srcOrientation) {
case 2:
ctx.transform(-1, 0, 0, 1, width, 0);
break;
case 3:
ctx.transform(-1, 0, 0, -1, width, height);
break;
case 4:
ctx.transform(1, 0, 0, -1, 0, height);
break;
case 5:
ctx.transform(0, 1, 1, 0, 0, 0);
break;
case 6:
ctx.transform(0, 1, -1, 0, height, 0);
break;
case 7:
ctx.transform(0, -1, -1, 0, height, width);
break;
case 8:
ctx.transform(0, -1, 1, 0, 0, width);
break;
default:
ctx.transform(1, 0, 0, 1, 0, 0);
}
// draw image
ctx.drawImage(img, 0, 0, width, height);
// export base64
resolve(canvas.toDataURL("image/jpeg", 0.6));
};
img.src = srcBase64;
})
}
我能够修改该功能，以便在定位后图像被裁剪为正方形。我尝试使用方向1和6的图像。我可以在这里遗漏更多的情况吗？这是代码：
function resetOrientationResizeCompress(srcBase64, srcOrientation) {
return new Promise(function (resolve) {
var img = new Image();
img.onload = function () {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d"),
start_Y,
start_X;
var MAX_WIDTH = 1000;
var MAX_HEIGHT = 1000;
//srcOrientation is defined
if(srcOrientation){
// set proper canvas dimensions before transform & export
if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = height;
canvas.height = width;
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
canvas.width = width;
canvas.height = height;
}
}
//srcOrientation undefined
else{
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = height;
canvas.height = width;
}
//crop image for different cases (vertical, horizontal, square image)
if(canvas.width < canvas.height){
console.log('vertical');
start_Y = (canvas.height - canvas.width)/2;
start_X = 0;
canvas.height = canvas.width;
}
else if(canvas.width > canvas.height){
console.log('horizontal');
start_Y = (canvas.width - canvas.height)/2;
start_X = 0;
canvas.width = canvas.height;
}
else if(canvas.width == canvas.height){
console.log('square');
start_Y = 0;
start_X = 0;
}
// orientate image if orientation is defined
if(srcOrientation){
// transform context before drawing image
switch (srcOrientation) {
case 2:
ctx.transform(-1, 0, 0, 1, width, 0);
break;
case 3:
ctx.transform(-1, 0, 0, -1, width, height);
break;
case 4:
ctx.transform(1, 0, 0, -1, 0, height);
break;
case 5:
ctx.transform(0, 1, 1, 0, 0, 0);
break;
case 6:
ctx.transform(0, 1, -1, 0, height, 0);
break;
case 7:
ctx.transform(0, -1, -1, 0, height, width);
break;
case 8:
ctx.transform(0, -1, 1, 0, 0, width);
break;
default:
ctx.transform(1, 0, 0, 1, 0, 0);
}
}
// draw image
ctx.drawImage(img, -start_Y, start_X, width, height);
// export base64
resolve(canvas.toDataURL("image/jpeg", 0.6));
};
img.src = srcBase64;
})
}
答案 0 :(得分：0)
绝对最简单的解决方案，如果您不关心实际编辑图像并且您知道确切的裁剪尺寸，只需从负坐标开始绘制图片，以便图像的左侧或顶部离开画布。或者，您可以使画布足够小，以便在x = y = 0时绘制时，右半部分或下半部分被切除。在任何一种情况下，它都是关于将画布调整到您想要图片的大小，并将其定位以使您不想要的区域被截断。
或者，像cropper.js这样的惊人库可以为用户提供很多自由裁剪。我知道使用cropper.js你可以将裁剪限制为一个正方形并让用户将该正方形拖到他们想要裁剪的位置