我使用此函数来定位、调整大小和压缩用户提交的图像。 如果是手机拍摄的照片是矩形的。我需要从原始图像中得到一张方形图像，在旋转后裁剪它。怎么做？
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;
})
}
最佳答案
绝对最简单的解决方案，如果您不关心实际编辑图像并且知道确切的裁剪尺寸，则只需从负坐标开始绘制图片，以便图像的左侧或顶部脱离 Canvas 。或者，您可以使 Canvas 足够小，以便在 x=y=0 处绘制时，右半部分或下半部分被切除。无论哪种情况，都是将 Canvas 调整为您想要的图片大小，并对其进行定位，以便剪切掉您不需要的区域。
或者，还有一些令人惊叹的库，例如cropper.js，可以为用户提供很大的裁剪自由。我知道使用cropper.js，您可以将裁剪限制为一个正方形，并让用户将该正方形拖动到他们想要裁剪的位置
关于javascript - 在javascript中定向后 Canvas 将图像裁剪为正方形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44574034/