使用 getImageData 调整画布大小答案

【问题标题】：Canvas resizing with getImageData使用 getImageData 调整画布大小
【发布时间】：2017-10-24 12:14:29
【问题描述】：

我正在开发一个应用程序，它允许用户使用触摸/手写笔在画布上进行物理绘图。界面的一部分是一个“调整大小按钮”，它增加了画布的大小以填满整个屏幕，以允许更多的空间。

目前，我正在使用 getImageData 和 putImageData 复制较小的画布并在画布放大后重绘。这工作正常......在一定程度上。

问题在于当在较大的画布上绘图并恢复到较小的画布时，自然会切断部分数据。再次，不是问题。但是，当我在画布本身上使用 getImageData 时，如果我要再次切换到全屏，它只会复制较小画布中可见的数据。问题就在这里。

无论我在哪个视图中，我都希望保留绘图数据。

有什么想法吗？

PS。请原谅我奇怪的香草和 jQuery 组合，我正在快速尝试其他人的建议。

另外，sizer 是“调整大小”按钮。 draw 是我的画布 ID，right-panel 包裹着我的画布。

var panelWidth = $(".right-panel").width();
var panelHeight = $(".right-panel").height();

var c = document.getElementById("draw");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, panelWidth, panelHeight);

$(".sizer").click(function(){
    var imgData = ctx.getImageData(0, 0, panelWidth, panelHeight);
    $('.right-panel').toggleClass('huge');
    var width = $(".right-panel").css("width");
    var height = $(".right-panel").css("height");
    var el = $("canvas");
    el.attr("width", width);
    el.attr("height", height);
    panelWidth = $(".right-panel").css("width").replace(/[^-\d\.]/g, '');
    panelHeight = $(".right-panel").css("height").replace(/[^-\d\.]/g, '');
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, panelWidth, panelHeight);
    ctx.putImageData(imgData, 0, 0);
});

【问题讨论】：

只需将绘图保持为全分辨率画布，但不要将其添加到 DOM。对该画布进行所有渲染，并将屏幕上的画布用作视图。这使您可以在不影响绘图的情况下缩放、平移、旋转、调整视图大小。您可以使用 ctx.drawImage 将一个画布绘制到另一个画布上。

标签： jquery html canvas

【解决方案1】：

最终到达那里，正确与否！ :) 我最终做的是最初创建一个大画布，并限制它的容器溢出。然后，当单击“sizer”图标时，有效地显示剩余的画布。很简单，但很有效。

我尝试了getImageData 和drawImage()，但都没有真正发挥作用。也许我只是不完全理解他们！但无论如何，如果有人有类似的问题，我想我会分享。

【讨论】：