尽管进行了搜索，但无法找到解决此问题的正确方法：我在电话上使用cam在单击时在全屏画布中显示视频。它运作完美。然后，我创建一个具有4个可拖动锚点的div以裁剪画布图像。当用户拖放锚点时，第二个画布将显示在此div下并调整大小（大小和位置）。当用户对要获取的裁切图片表示满意时，他单击按钮以将初始画布图像的右侧部分加载到第二个画布中。我的问题是：如何继续获取完全相同的图片，就像不存在第二个画布一样，您可以看到它，因为它的边框但是屏幕上的“全局”图像保持不变。

示例：secondCanvas的宽度为200px，高度为300px，左侧为50px，顶部为50px：

var imgctx = new Image; 
imgctx.onload = function(){
    secondCanvas.getcontext('2d').drawImage(imgctx,50,firstCanvas.width,firstCanvas.height,200,300);
};
imgctx.src = firstCanvas.toDataURL("image/png");

这里我在firstCanvas中以50x50px的位置捕获了一个200x300px的图像，然后将其粘贴到0,0 +图像大小的secondCanvas中……这是行不通的，secondCanvas图片较小，而0,0点却没有与50,50的画布匹配（第二个画布的左上方图像未放置在第一个画布的右侧）（希望您理解）。

当我尝试使用firstCanvas大小时：

   secondCanvas.getcontext('2d').drawImage(imgctx,firstCanvas.height);            

图像不适合第二个画布，并且其0,0与50,50点不匹配。 我终于发现，尽管事实上我的画布的样式是100％+ 100％（移动屏幕：360x512px），但视频将其放大到480x640px。我想这就是为什么我的第二个画布不代表第一个画布中的内容的原因...是否有一种方法可以计算出如何完全按照第二个画布中的需要绘制img？