drawImage无法在画布上呈现图像

Question

所以我有这个输入文件，每次文件输入更改时，它将文件数据发送给函数

$('input#fileinput').change(function(e){
    var tgt = e.target || window.event.srcElement,
    files = tgt.files;

    renderImage(files);
});

function renderImage(files){

    return new Promise((resolve, reject) => {
        var fr = new FileReader();  
        fr.onload = function(){
            $('#image-editor-wrapper img').remove();
            $('#image-editor-wrapper').append('<img id="img-raw" src="'+fr.result+'" style="position:absolute;visibility:hidden;z-index:99999"><canvas id="canvas-raw"></div>');
            $('#crop-border').css('visibility','visible');


            var c = document.getElementById("canvas-raw");
            var ctx = c.getContext("2d");
            var img = document.getElementById("img-raw");

            document.querySelector('#canvas-raw').setAttribute('width',img.naturalWidth);
            document.querySelector('#canvas-raw').setAttribute('height',img.naturalHeight);

            ctx.drawImage(img, 10, 10);
        }
        fr.readAsDataURL(files[0]);
      });
}

，但不起作用，就像完全没有显示图像一样。有什么帮助吗，想法吗？