javascript - 无法从数据 Uri 绘制到 HTML 5 Canvas

Question

我已经尝试了几个小时，但感到沮丧。由于未知原因，我的数据 Uri 图像不会写入我的 Canvas ......

这是我的代码...

function addImage() {

var allfiles = $("#postAttachPhoto")[0].files;
var container = $("#ajaxImageContainer");
var linkContainer = $("#scrapedLinkContainer");
var imagePreview = $("#previewImages");
var textArea = $("#postTextArea");



// Handle Inserting The Image Container and Adjusting Sizes
if (!container.is(':visible')) {
    container.show();
    textArea.removeClass('imgPad');
textArea.removeClass('bothPad');
textArea.removeClass('linkPad');

    // is the link ele visible?
    if (!linkContainer.is(':visible')) {
        textArea.addClass('imgPad');
    }
    else{
        textArea.addClass('bothPad');
        container.addClass('linkMargin');
    }
}

$(allfiles).each(function () {
    var file = $(this);
    var mime = file[0].type;
    var reader = new FileReader();


    reader.onload = function (e) {
        var imageSource = e.target.result;

        var image = new Image();
        var canvas = document.createElement('canvas');
        var imagePreview = $("#previewImages");
        var number = 1 + Math.floor(Math.random() * 1000);

        canvas.id = "canvas_"+number;
        var ctx = canvas.getContext("2d");
        var resize = {};

        image.onload = function(){
            ctx.drawImage(this,0,0);
            resize = calculateAspectRatioFit(image.width,image.height,'200','1000');
            canvas.width = resize.width;
            canvas.height = resize.height;
            imagePreview.append(canvas);

            /*var previewImage = $("<img onClick='rotateImage(this);'/>");
        previewImage.attr("style", "width:250px;");
        previewImage.attr("src", e.target.result);
        previewImage.attr("class", 'previewImg');
        previewImage.attr("class", 'previewImg');
        previewImage.attr("id", 'previewImg_' + number);
        imagePreview.append(previewImage);
        */
        };
        image.src = imageSource;


    };
    reader.readAsDataURL(file[0]);


});
autosize.update(textArea);
}

注意:注释掉的代码适用于通过图像标签显示。 主要目标是能够通过允许 90 度旋转来修改此图像。它无法通过 img 标签工作，因此我尝试加载到 Canvas 中。

Answer 1

问题在于加载图像后更改 Canvas 大小。 删除尺寸组件后，代码运行良好!

感谢@Manuel Otto 的帮助。