Javascript 在Cavnas内平移图像后获取完整图像数据

我有一个情况，我需要得到画布内的全部，即使在平移图像

提前谢谢

小提琴中的例子：

---

PS:JSFiddle用于演示，我无法将确切的场景放入JSFiddle中。在应用程序中，我平移图像，然后使用鼠标在画布上使用和事件绘制一些东西。在活动中，我需要使用我绘制的完整图像，但使用时，我只会将图像显示在画布上。平移的图像被裁剪为画布大小。

正如@Blindman67所建议的，您可以制作第二个画布

创建对象以存储图像中最远的点

const imagePadding={
排名：0，
右:0,，
底部：0，
左：0
}

顶部

应为图纸的最高点，

右侧

应为最右侧的点，依此类推。出于演示目的，将填充设置为在每个方向上平移的距离。您需要将其设置为在每个方向（向上、向右、向下和向左——这就是我所说的方向）上最远的图形/点

功能窗格图像（e）{
平移x+=e.movementX
平移y+=e.movementY
drawPreview（）
imagePadding.top=Math.max（imagePadding.top，pan.y）
imagePadding.left=Math.max（imagePadding.left，pan.x）
imagePadding.bottom=Math.max（imagePadding.bottom，-pan.y）
imagePadding.right=Math.max（imagePadding.right，-pan.x）
}

要绘制完整图像，可以创建如下函数：

函数drawFinalImage（）{
const canvas=document.createElement（'canvas'）
const ctx=canvas.getContext（'2d'）
const pannedImage=document.getElementById（'image'））
canvas.width=previewCanvas.width+imagePadding.left+imagePadding.right
canvas.height=previewCanvas.height+imagePadding.top+imagePadding.bottom
translate（imagePadding.left，imagePadding.top）
drawShapes（ctx）
pannedImage.src=canvas.toDataURL（）
}

有关演示以及如何实现代码的信息，请参见。如果有什么需要我更好解释的，请告诉我

您可以使用JSFIDLE控制台来调整填充。键入

imagePadding.top=200

，按enter键，然后单击画布以更新最终图像

---

使用第二个画布，该画布足够大，可以容纳您想要获取的所有像素，并在其上绘制内容，然后使用第二个画布上的getImageData。@Blindman 67我不太清楚，请您再解释一下，举个例子，对不起，报告的问题是关于

getImageData

，但我在你的代码中找不到你是如何以及何时调用它的。很难回答。除此之外，您还说您正在使用mouseDown和mouseMove绘制一些东西，但在您的代码中，这些事件用于移动图像。。。。要回答这个问题实在太难了

<canvas id="canvas"></canvas>
<button onclick="showImage()">
Show panned Image
</button>
<img id="image" src='' />

var context     = canvas.getContext("2d");
canvas.width    = 400;
canvas.height   = 300;

var global = {
scale : 1,
offset    : {
 x : 0,
 y : 0,
},
};
var pan = {
start : {
 x : null,
 y : null,
},
offset : {
 x : 0,
 y : 0,
},
};

function draw() {
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

context.translate(pan.offset.x, pan.offset.y);

context.beginPath();
context.rect(50, 50, 100, 100);
context.fillStyle = 'skyblue';
context.fill();

context.beginPath();
context.arc(350, 250, 50, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();

}

draw();

canvas.addEventListener("mousedown", startPan);
canvas.addEventListener("mouseleave", endPan);
canvas.addEventListener("mouseup", endPan);

function startPan(e) {
canvas.addEventListener("mousemove", trackMouse);
canvas.addEventListener("mousemove", draw);
pan.start.x = e.clientX;
pan.start.y = e.clientY;
}

function endPan(e) {
canvas.removeEventListener("mousemove", trackMouse);
pan.start.x = null;
pan.start.y = null;
global.offset.x = pan.offset.x;
global.offset.y = pan.offset.y;
}

function trackMouse(e) {
var offsetX    = e.clientX - pan.start.x;
var offsetY    = e.clientY - pan.start.y;
pan.offset.x = global.offset.x + offsetX;
pan.offset.y = global.offset.y + offsetY;
}

function showImage(){
document.getElementById('image').src = canvas.toDataURL();
}