ctx.drawImage-结果为黑色矩形

Question

我有一张图片（imgt）和可调整大小且可移动的裁剪div（ram），并且想要根据imgt的大小和位置来裁剪ram。 / p>

结果-尺寸尚可，但是没有图像，只有黑色矩形。

var img = document.getElementById("imgt");
c1 = document.createElement("canvas");
var ctx = c1.getContext("2d");

var a = $('#imgt').width();
var b = $('#imgt').height();
c1.width = a;
c1.height = b;
ctx.drawImage(img, 0, 0, a, b);

ax = $('#ram').position().left;
ay = $('#ram').position().top;
aw = $('#ram').width();
ah = $('#ram').height();

var img = new Image();
img.src = c1.toDataURL('image/jpeg');
c2 = document.createElement("canvas");
c2.width = aw;
c2.height = ah;

var ctx = c2.getContext("2d");
ctx.drawImage(img, ax, ay, aw, ah, 0, 0, aw, ah);

var dl = document.createElement("a");
dl.href = c2.toDataURL("image/jpeg");
dl.download = true;
document.body.appendChild(dl);
dl.click();