Question

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

以下是从我的应用中拍摄的肖像照片的示例： Uploaded Photo

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

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');
    };
}

如果有人能告诉我我的代码错误以及如何修复它，我真的很感激。

先谢谢

Answer 1

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

无需在每次调用processFile时加载图像。
drawImage需要9 arguments。其中许多都是可选的。首先是图像。从第二到第五是图像的剪切区域。从第六到第九是绘制画布的区域。因此，您无法使用context.drawImage(this, 0, 0, newWidth, newHeight);您必须使用context.drawImage(image, 0, 0, width, height, x, y, newWidth, newHeight);
每次调用processFile（）时都不需要创建canvas元素，一个隐藏的画布可以用于所有处理。
应该在onload / onerror事件被绑定后分配Image的src属性，否则他们可能无法运行。

这是工作的JsFiddle链接

http://jsfiddle.net/48qfy71a/

我已删除了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>

<强>脚本

//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);
}

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

1 个答案: