通过画布旋转肖像图像未正确居中（Javascript）_Javascript_Image_Canvas_Orientation

通过画布旋转肖像图像未正确居中（Javascript）

javascript image canvas

通过画布旋转肖像图像未正确居中（Javascript）,javascript,image,canvas,orientation,Javascript,Image,Canvas,Orientation,我正在创建一个混合移动应用程序，用户可以从手机上拍照，然后上传到服务器上。我面临的问题是，当用户拍摄肖像图像时，图像没有正确居中，并且在其旁边留下黑色边框以下是从我的应用程序中拍摄的人像照片示例：下面是我用来根据方向旋转图像并对其进行压缩的代码 function processFile(dataURL, fileType, orientation) { var maxWidth = 800; var maxHeight = 600; var image = new Image(); i

我正在创建一个混合移动应用程序，用户可以从手机上拍照，然后上传到服务器上。我面临的问题是，当用户拍摄肖像图像时，图像没有正确居中，并且在其旁边留下黑色边框

以下是从我的应用程序中拍摄的人像照片示例：

下面是我用来根据方向旋转图像并对其进行压缩的代码

function processFile(dataURL, fileType, orientation) {

var maxWidth = 800;
var maxHeight = 600;

var image = new Image();
image.src = dataURL;

image.onload = function () {
    var width = image.width;
    var height = image.height;
    var shouldResize = (width > maxWidth) || (height > maxHeight);

    if (!shouldResize) {
        dataURL = dataURL.substring(dataURL.indexOf(',')+1);

        return;
    }


    var newWidth;
    var newHeight;

    if (width > height) {
        newHeight = height * (maxWidth / width);
        newWidth = maxWidth;
    } else {
        newWidth = width * (maxHeight / height);
        newHeight = maxHeight;
    }

    var canvas = document.createElement('canvas');

    canvas.width = newWidth;
    canvas.height = newHeight;

    var context = canvas.getContext('2d');

    console.log("orientation here: "+orientation);
   switch(orientation){
case 2:
    // horizontal flip
    context.translate(canvas.width, 0);
    context.scale(-1, 1);
    break;
case 3:
    // 180° rotate left
    context.translate(canvas.width, canvas.height);
    context.rotate(Math.PI);
    break;
case 4:
    // vertical flip
    context.translate(0, canvas.height);
    context.scale(1, -1);
    break;
case 5:
    // vertical flip + 90 rotate right
    context.rotate(0.5 * Math.PI);
    context.scale(1, -1);
    break;
case 6:
    // 90° rotate right
    context.rotate(0.5 * Math.PI);
    context.translate(0, -canvas.height);
    break;
case 7:
    // horizontal flip + 90 rotate right
    context.rotate(0.5 * Math.PI);
    context.translate(canvas.width, -canvas.height);
    context.scale(-1, 1);
    break;
case 8:
    // 90° rotate left
    context.rotate(-0.5 * Math.PI);
    context.translate(-canvas.width, 0);
    break;
}

      context.drawImage(this, 0, 0, newWidth, newHeight);



        dataURL = canvas.toDataURL(fileType,0.7);
        dataURL = dataURL.substring(dataURL.indexOf(',')+1);
        console.log("dataURL here: "+dataURL);

    };

    image.onerror = function () {
        alert('image error');
    };
}

如果有人能告诉我我的代码出了什么问题以及如何修复，我将不胜感激

感谢您在advanced

中忘记使用context.save（）和context.restore（）。除此之外，还有一些事情

无需在每次调用processFile时加载映像

drawImage拍摄。其中许多是可选的。首先是形象。从第二个到第五个是图像的剪裁区域。从第六到第九是画布的绘图区域。因此不能使用

context.drawImage（this，0，0，newWidth，newHeight）
您必须使用context.drawImage（图像，0，0，宽度，高度，x，y，newWidth，newHeight）


此外，无需每次调用processFile（）时都创建canvas元素，一个隐藏的canvas可用于所有处理
映像的src属性应该在onload/onerror事件绑定后分配，否则它们可能无法运行
这是正在工作的JSFIDLE链接

我已删除shouldResize检查条件，请根据需要添加它。
此外，我已经在画布上创建了一个图像，作为程序的输入，因为我无法找到不会污染画布的第三方图像
您可以使用以下所需的任何图像
//instead of
var imageUrl = createImageUrl();
// use this
var imageUrl = "test.jpg";

这是备份的代码
HTML
<html>
    <head>

    </head>
    <body>
        <strong>Orientation </strong><select id="selectOption">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select><br/>
        <canvas id="testCanvas" width="800", height="600" style="border:1px solid red;"></canvas>
        <script src="script.js"></script>
    </body>
</html>

这段代码没有问题，这意味着服务器端出现了问题。我敢打赌，你在服务器上假设即将出现的图像大小为800 X 600，如果进行了大小调整，则会有所不同。你能详细说明一下吗？我挠头是为了把它做好。嗨，我很抱歉，因为我没有看到你问题的旋转部分，是的，程序中有一些不正确的地方，我今天会发布一个答案。谢谢你，先生。稍加修改。我能正确地旋转它。谢谢
//var imageUrl = "test.jpg";
var imageUrl = createImageUrl();

function createImageUrl() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 800;
    canvas.height = 600;
    context.font = 'italic 60pt Calibri';
    context.textAlign = 'center';
    context.fillText('Hello World!', canvas.width/2, canvas.height/2);

    return canvas.toDataURL("jpg", 0.7);
}

document.getElementById("selectOption").onchange = function () {
    processFile("jpg", parseInt(this.value));
}

var image = new Image();

image.onload = function () { processFile("jpg", 1);};
image.onerror = function() {
    alert('image error');
};
image.src = imageUrl;

function processFile(fileType, orientation) {

    var maxWidth = 800;
    var maxHeight = 600;

    var width = image.width;
    var height = image.height;
    var shouldResize = (width > maxWidth) || (height > maxHeight);

    var canvas = document.getElementById('testCanvas');

    /*if (!shouldResize) {
        dataURL = dataURL.substring(dataURL.indexOf(',') + 1);

        return;
    }*/

    var newWidth;
    var newHeight;

    if (width > height) {
        newHeight = height * (maxWidth / width);
        newWidth = maxWidth;
    } else {
        newWidth = width * (maxHeight / height);
        newHeight = maxHeight;
    }

    canvas.width = newWidth;
    canvas.height = newHeight;

    var context = canvas.getContext('2d');

    console.log("orientation here: " + orientation);
    context.save();
    switch (orientation) {
        case 2:
            // horizontal flip
            context.translate(newWidth, 0);
            context.scale(-1, 1);
            drawScalledImage(0, 0);
            break;
        case 3:
            // 180° rotate left
            context.translate(canvas.width, canvas.height);
            context.rotate(Math.PI);
            drawScalledImage(0, 0);
            context.translate(-canvas.width, -canvas.height);
            break;
        case 4:
            // vertical flip
            context.translate(0, newHeight);
            context.scale(1, -1);
            drawScalledImage(0, 0);
            break;
        case 5:
            // vertical flip + 90 rotate right
            context.translate(newWidth / 2, newHeight / 2);
            context.rotate(0.5 * Math.PI);
            context.scale(1,-1);
            drawScalledImage(-newWidth / 2, -newHeight / 2);
            break;
        case 6:
            // 90° rotate right
            context.translate(newWidth / 2, newHeight / 2);
            context.rotate(0.5 * Math.PI);
            drawScalledImage(-newWidth / 2, -newHeight / 2);
            break;
        case 7:
            // horizontal flip + 90 rotate right
            context.translate(newWidth / 2, newHeight / 2);
            context.rotate(0.5 * Math.PI);
            context.scale(-1,1);
            drawScalledImage(-newWidth / 2, -newHeight / 2);
            break;
        case 8:
            // 90° rotate left
            context.translate(newWidth / 2, newHeight / 2);
            context.rotate(-0.5 * Math.PI);
            drawScalledImage(-newWidth / 2, -newHeight / 2);
            context.rotate(0.5 * Math.PI);
            context.translate(-newWidth / 2, -newHeight / 2);
            break;
        default:
            drawScalledImage(0, 0);
            break;
    }

    function drawScalledImage(x,y) {
        context.drawImage(image, 0, 0, width, height, x, y, newWidth, newHeight);
    }
    context.restore();

    window.context = context;
    var base64Image = canvas.toDataURL(fileType, 0.7);
    base64Image = base64Image.substring(base64Image.indexOf(',') + 1);

    //console.log("dataURL here: " + dataURL);
}