無法從Data Uri繪制到HTML 5 Canvas

Question

我已經嘗試了幾個小時，並且感到沮喪。 由於未知原因，我的Data Uri圖像不會寫到我的畫布上。

這是我的代碼...

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

注意：注釋掉的代碼可通過image標簽顯示。 主要目的是能夠通過允許90度旋轉來修改此圖像。 它沒有從img標簽起作用，所以我試圖加載到畫布中。

Answer 1

問題在於在加載圖像后更改畫布大小。 刪除調整大小的組件后，代碼運行良好！

感謝@Manuel Otto的幫助。