javascript - 对选定文件进行 Canvas 旋转和调整大小操作时，加载程序图像不显示

Question

我在这里创建了示例代码 http://jsfiddle.net/kamlesh_bhure/YpejU/我正在旋转图像并根据最大高度和宽度调整其大小。

在开始这个过程之前，我会显示加载图像的蒙版并在完成后隐藏它。但是我无法在移动设备或桌面浏览器上看到这个加载器，即使我使用了大图像。

我还想显示加载图像，直到浏览器完成其已处理图像的渲染。

提前致谢。

<!-- HTML Code -->
<div id="mask" class="newLoaderMask">
    <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" width="200" id="loader" />
</div>
<input type="file" accept="image/*" id="takePictureField" />
<div class="captureInsuPanel">
    <img id="yourimage" class="imgWeightHght" width="500" />
</div>
<canvas id="hidden_canvas_old"></canvas>
<canvas id="hidden_canvas_new"></canvas>
<style>
#yourimage {
    width:100%;
}
.imgWeightHght {
    height: 290px !important;
    width: 220px !important;
}
.captureInsuPanel img {
    height: auto;
    width: auto;
}
.newLoaderMask {
    display: none;
    background: #E5E5E5;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}
</style>

<script>
//Js Code 
$(document).ready(function () {
    $("#takePictureField").on("change", gotPic);
});

function gotPic(event) {
    if (event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) {
        var image = event.target.files[0];
        $("#yourimage").attr("src", URL.createObjectURL(image));
        drawRotatedImage(image, 90, 800, 1000);
    }
}

function drawRotatedImage(image, angle, max_width, max_height) {
    //show loading mask
    $('#mask').show();
    var fileLoader = new FileReader(),
        imageObj = new Image();

    if (image.type.indexOf("image/") == 0) {
        fileLoader.readAsDataURL(image);
    } else {
        alert('File is not an image');
    }
    fileLoader.onload = function () {
        var data = this.result;
        imageObj.src = data;
    };

    fileLoader.onabort = function () {
        alert("The upload was aborted.");
    };

    fileLoader.onerror = function () {
        alert("An error occured while reading the file.");
    };


    // set up the images onload function which clears the hidden canvas context, 
    // draws the new image then gets the blob data from it
    imageObj.onload = function () {
        var imgWidth = this.width;
        var imgHeight = this.height;
        rotateAndResize(this, imgWidth, imgHeight);

    };

    function rotateAndResize(image, imgWidth, imgHeight) {
        var canvas = document.getElementById("hidden_canvas_old"),
            ctx = canvas.getContext("2d");

        var widthHalf = imgWidth / 2,
            heightHalf = imgHeight / 2;

        canvas.width = imgWidth;
        canvas.height = imgWidth;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(angle * Math.PI / 180);
        ctx.drawImage(image, -widthHalf, -widthHalf);

        ctx.restore();

        var tempCanvas = document.getElementById("hidden_canvas_new"),
            tCtx = tempCanvas.getContext("2d");

        tempCanvas.width = imgHeight;
        tempCanvas.height = imgWidth;
        /*
         * Crop rotated image from old canvas to remove white space 
         * So that canvas will have only image content without extra padding
         */
        tCtx.drawImage(canvas, canvas.width - imgHeight, 0, imgHeight, imgWidth, 0, 0, imgHeight, imgWidth);
        tCtx.restore();

        /**
         * Resizing Rotated image
         */
        // calculate the width and height, constraining the proportions
        if (imgWidth > imgHeight) {
            if (imgWidth > max_width) {
                imgHeight = Math.round(imgHeight *= max_width / imgWidth);
                imgWidth = max_width;
            }
        } else {
            if (imgWidth > max_height) {
                imgWidth = Math.round(imgWidth *= max_height / imgHeight);
                imgHeight = max_height;
            }
        }
        var tempCanvasTemp = tempCanvas;
        tempCanvas.remove();
        canvas.remove();

        var tempCanvas1 = document.createElement("canvas"),
            tCtx1 = tempCanvas1.getContext("2d");

        tempCanvas1.id = 'hidden_canvas_new';
        //tempCanvas1.style.display = 'none';
        tempCanvas1.width = imgHeight;
        tempCanvas1.height = imgWidth;

        tCtx1.drawImage(tempCanvasTemp, 0, 0, imgHeight, imgWidth);
        tCtx1.restore();

        document.body.appendChild(tempCanvas1);

        $("#yourimage").attr("src", tempCanvas1.toDataURL('image/jpeg'));
    }
    //hide loading mask
    $('#mask').hide();
}
</script>

Answer 1

您将加载 div #mask 隐藏在 drawRotatedImage 函数中，但您应该将其隐藏在要绘制图片的 rotateAndResize 函数中 Canvas 。

代码:

$(document).ready(function () {
    $("#takePictureField").on("change", gotPic);
});

function gotPic(event) {
    if (event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) {
        var image = event.target.files[0];
        $("#yourimage").attr("src", URL.createObjectURL(image));
        drawRotatedImage(image, 90, 800, 1000);
    }
}

function drawRotatedImage(image, angle, max_width, max_height) {
    $('#mask').show();
    var fileLoader = new FileReader(),
        imageObj = new Image();

    if (image.type.indexOf("image/") == 0) {
        fileLoader.readAsDataURL(image);
    } else {
        alert('File is not an image');
    }
    fileLoader.onload = function () {
        var data = this.result;
        imageObj.src = data;
    };

    fileLoader.onabort = function () {
        alert("The upload was aborted.");
    };

    fileLoader.onerror = function () {
        alert("An error occured while reading the file.");
    };


    // set up the images onload function which clears the hidden canvas context, 
    // draws the new image then gets the blob data from it
    imageObj.onload = function () {
        var imgWidth = this.width;
        var imgHeight = this.height;
        rotateAndResize(this, imgWidth, imgHeight);

    };

    function rotateAndResize(image, imgWidth, imgHeight) {
        var canvas = document.getElementById("hidden_canvas_old"),
            ctx = canvas.getContext("2d");

        var widthHalf = imgWidth / 2,
            heightHalf = imgHeight / 2;

        canvas.width = imgWidth;
        canvas.height = imgWidth;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(angle * Math.PI / 180);
        ctx.drawImage(image, -widthHalf, -widthHalf);

        ctx.restore();

        var tempCanvas = document.getElementById("hidden_canvas_new"),
            tCtx = tempCanvas.getContext("2d");

        tempCanvas.width = imgHeight;
        tempCanvas.height = imgWidth;
        /*
         * Crop rotated image from old canvas to remove white space 
         * So that canvas will have only image content without extra padding
         */
        tCtx.drawImage(canvas, canvas.width - imgHeight, 0, imgHeight, imgWidth, 0, 0, imgHeight, imgWidth);
        tCtx.restore();

        /**
         * Resizing Rotated image
         */
        // calculate the width and height, constraining the proportions
        if (imgWidth > imgHeight) {
            if (imgWidth > max_width) {
                imgHeight = Math.round(imgHeight *= max_width / imgWidth);
                imgWidth = max_width;
            }
        } else {
            if (imgWidth > max_height) {
                imgWidth = Math.round(imgWidth *= max_height / imgHeight);
                imgHeight = max_height;
            }
        }
        var tempCanvasTemp = tempCanvas;
        tempCanvas.remove();
        canvas.remove();

        var tempCanvas1 = document.createElement("canvas"),
            tCtx1 = tempCanvas1.getContext("2d");

        tempCanvas1.id = 'hidden_canvas_new';
        //tempCanvas1.style.display = 'none';
        tempCanvas1.width = imgHeight;
        tempCanvas1.height = imgWidth;

        tCtx1.drawImage(tempCanvasTemp, 0, 0, imgHeight, imgWidth);
        tCtx1.restore();

        document.body.appendChild(tempCanvas1);

        $("#yourimage").attr("src", tempCanvas1.toDataURL('image/jpeg'));
         $('#mask').hide();
    }
}

DEMO FIDDLE

注意: 在测试 fiddle 时发现了另一个问题，如果我们尝试第二次上传图像，第二个 Canvas 不会更新新图像。希望您需要为此努力。