Javascript 无法从数据Uri绘制到HTML 5画布

我已经试了好几个小时了，现在很沮丧。由于未知原因，我的数据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);
}

函数addImage（）{
var allfiles=$（“#postAttachPhoto”）[0]。文件；
变量容器=$（“#ajaxImageContainer”）；
var linkContainer=$（“#scrapedLinkContainer”）；
var imagePreview=$（“预览图像”）；
var textArea=$（“#postTextArea”）；
//处理插入图像容器和调整大小
如果（！container.is（'：visible'））{
container.show（）；
textArea.removeClass（'imgPad'）；
textArea.removeClass（'bothPad'）；
textArea.removeClass（'linkPad'）；
//链接元素是否可见？
如果（！linkContainer.is（'：visible'））{
textArea.addClass（'imgPad'）；
}
否则{
textArea.addClass（'bothPad'）；
container.addClass（'linkMargin'）；
}
}
$（所有文件）。每个（函数（）{
var file=$（此文件）；
var mime=文件[0]。类型；
var reader=new FileReader（）；
reader.onload=函数（e）{
var imageSource=e.target.result；
var image=新图像（）；
var canvas=document.createElement（'canvas'）；
var imagePreview=$（“预览图像”）；
变量编号=1+数学楼层（数学随机（）*1000）；
canvas.id=“canvas”+编号；
var ctx=canvas.getContext（“2d”）；
var resize={}；
image.onload=函数（）{
ctx.drawImage（这个，0,0）；
resize=计算光谱（image.width，image.height，'200'，'1000'）；
canvas.width=resize.width；
canvas.height=调整大小.height；
imagePreview.append（画布）；
/*var previewImage=$（“
注意：注释掉的代码用于通过图像标记显示。
主要目标是通过允许90度旋转来修改此图像。它无法从img标记工作，因此我尝试加载到画布中。
问题在于加载图像后更改画布大小。
删除大小调整组件后，代码运行良好

感谢@Manuel Otto的帮助。
所有文件中都有什么内容

？请更新您的问题，使其在问题本身的a中显示您的相关代码。如果您能让我们知道您迄今为止为解决您的问题所做的努力，也会很有帮助。有关更多信息，请参阅关于，以：）为例，您从未将画布添加到DOM中…即

document.body.appendChid（canvas）

，因此，如果您看不到它，您如何知道它没有写入其中。也没有理由这样做

file=$（this）

所有文件都是一个文件输入。此外，它缺少将其添加到dom中的代码，但确实如此。canvas元素是透明的。在更改画布的宽度和高度后，是否可以执行

ctx.drawImage（）

调用？重置宽度和高度可能会清除画布。@Manueloto钉在头部。谢谢！