Question

我在这里寻找一种使用javascript定位图像客户端的方法。我发现了一些东西，最后得到了这个脚本似乎图像正确传递，但ctx.drawImage(img, 0, 0);的结果未定义，我不明白为什么。我只需要函数将新图像作为base64返回，这样我就可以正确处理插入dom。我不确定我是否正确地返回它，但是之前的问题是，如上所述drawImage返回undefined，似乎它正在尝试路由undefined:1 GET http://myproject.dev/model/undefined 404 (Not Found)可能我错过了一些愚蠢的东西。 / p>

事件部分

$(document).ready(function() {
    $('#modelpic').on("change", function () {

        //shows image preview in DOM
        var files = !!this.files ? this.files : [];

        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader

            reader.readAsDataURL(this.files[0]); // read the local file

            reader.onloadend = function(){ // show image in div

                var base64img = this.result;

                var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));
                var srcOrientation = exif.Orientation;

                var img = resetOrientation(base64img, srcOrientation);

                $('#imagePreview').show().html('<img id="theImage" src="' + img + '" class="img-fluid" alt="Your Image" />');

            }
        }
    })
});

照顾方向的功能

function resetOrientation(srcBase64, srcOrientation) {

    var img = new Image();

    img.onload = function() {
        var width = img.width,
            height = img.height,
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d");

        console.log(ctx);

        // set proper canvas dimensions before transform & export
        if ([5,6,7,8].indexOf(srcOrientation) > -1) {
            canvas.width = height;
            canvas.height = width;
        } else {
            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);

        // export base64
        return img;
    };

    img.src = srcBase64;
};

将base64转换为数组以进行EXIF检查的功能。

function base64ToArrayBuffer (base64) {
    base64 = base64.replace(/^data:([^;]+);base64,/gmi, '');
    var binaryString = window.atob(base64);
    var len = binaryString.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}

Answer 1

你没有在里面归还任何东西＆＃34; resetOrientation＆＃34;
看起来你试图返回画布元素，因为它不能在src =＆＃34;＆＃34;＆＃34;
img.onload is async

我认为这是要走的路（虽然未经测试）

function resetOrientation(srcBase64, srcOrientation) {
    return new Promise(function(resolve, reject){

      var img = new Image();

    img.onload = function() {
        var width = img.width,
            height = img.height,
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d");

        console.log(ctx);

        // set proper canvas dimensions before transform & export
        if ([5,6,7,8].indexOf(srcOrientation) > -1) {
            canvas.width = height;
            canvas.height = width;
        } else {
            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);

        // export base64
        resolve(canvas.toDataURL())
    };

    img.src = srcBase64;

    })

};

然后

$(document).ready(function() {
    $('#modelpic').on("change", function () {

        //shows image preview in DOM
        var files = !!this.files ? this.files : [];

        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader

            reader.readAsDataURL(this.files[0]); // read the local file

            reader.onloadend = function(){ // show image in div

                var base64img = this.result;

                var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));
                var srcOrientation = exif.Orientation;

                resetOrientation(base64img, srcOrientation).then((img)=>{
                  $('#imagePreview').show().html('<img id="theImage" src="' + img + '" class="img-fluid" alt="Your Image" />');
                })



            }
        }
    })
});

脚本无法定位图像并返回新图像：undefined

1 个答案: