通過畫布旋轉人像圖像無法正確居中（Javascript）

Question

我正在創建一個混合移動應用程序，用戶可以在其中使用手機拍照，然后將其上傳到服務器。 我面臨的問題是，當用戶拍攝人像圖像時，圖像沒有正確居中，並在其旁邊留下黑色邊框。

這是從我的應用中拍攝的人像照片的示例：上傳的照片

以下是我用於根據方向旋轉圖像並對其進行壓縮的代碼

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個參數。 其中許多是可選的。 首先是圖像。 從第二到第五是圖像的裁剪區域。 從第六到第九是畫布的繪制區域。 所以你不能使用context.drawImage(this, 0, 0, newWidth, newHeight);
您必須使用context.drawImage(image, 0, 0, width, height, x, y, newWidth, newHeight);
同樣，也不需要每次調用processFile（）時都創建canvas元素，一個隱藏的canvas可以用於所有處理。
應在綁定onload / onerror事件之后分配圖像的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 個解決方案

解決方案1
0 2015-12-11 19:19:59

通過畫布旋轉人像圖像無法正確居中（Javascript）

問題描述

1 個解決方案

解決方案1 0 2015-12-11 19:19:59

解決方案1
0 2015-12-11 19:19:59