使用javascript在网页的选定区域创建图像

Question

需要使用所选区域创建图像，我可以选择带有背景图像的页面区域，并获得页面X和Y坐标以及所选区域的长度。我需要创建所选区域的图像，或捕获所选区域并另存为图像。但是当我尝试绘制图像时会抛出common.js？ocauxu：1912 Uncaught TypeError：无法执行＆＃39; drawImage＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是＆＃39;（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）＆＃39; selectElements @ common.js？ocauxu：1912dispatch @jquery.min.js？ v = 1.8.2：2h @ jquery.min.js？v = 1.8.2：2，需要一种机制来创建一个包含我给出的数据的图像，下面是我在Drupal 7中尝试过的代码。

$(document).ready(function(){
  $('body').append('<div class="ghost-select"><span></span></div><canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">');
  $(document).mousedown(function (e) {
    $("#big-ghost").remove();
    $(".ghost-select").addClass("ghost-active");
    $(".ghost-select").css({
        'left': e.pageX,
        'top': e.pageY
    });
    initialW = e.pageX;
    initialH = e.pageY;
    $(document).bind("mouseup", selectElements);
    $(document).bind("mousemove", openSelector);

  });    
});

function selectElements(e) {
    $("#score>span").text('0');
    $(document).unbind("mousemove", openSelector);
    $(document).unbind("mouseup", selectElements);
    //Tried to create an image but not working
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);
    canvas.toDataURL();
    var img = document.getElementsByClassName("ghost-select");
    var imgData = ctx.getImageData(0, 0, c.width, c.height);    
    $(".ghost-select").removeClass("ghost-active");
    $(".ghost-select").width(0).height(0);
}

function openSelector(e) {
    var w = Math.abs(initialW - e.pageX);
    var h = Math.abs(initialH - e.pageY);

    $(".ghost-select").css({
        'width': w,
        'height': h
    });
    if (e.pageX <= initialW && e.pageY >= initialH) {
        $(".ghost-select").css({
            'left': e.pageX
        });
    } else if (e.pageY <= initialH && e.pageX >= initialW) {
        $(".ghost-select").css({
            'top': e.pageY
        });
    } else if (e.pageY < initialH && e.pageX < initialW) {
        $(".ghost-select").css({
            'left': e.pageX,
            "top": e.pageY
        });
    }
}