如何在没有模糊图像的情况下将隐藏的画布对象复制到图像

Question

我正在将二维码呈现给div，但div是隐藏的。当我将画布复制到具有正确尺寸的图像时，图像模糊。     var children = $（＆＃34;＃trial＆＃34;）。children（）;     var canvas = children [0];

var ctx = canvas.getContext('2d');
//ctx.scale(3,3);

var img = new Image();

img.width = "300";
img.src = canvas.toDataURL();
$("#imagetrial").html(img);

我已尝试按照注释代码缩放它，但原始图像变小，当拉伸图像时它变得模糊。如果没有隐藏div，代码可以正常工作，但是我无法显示画布，我只对传递给弹出打印页面的数据网址感兴趣。

有没有人知道如何调整隐藏div中的画布大小以便正确复制？

Answer 1

您可以设置画布的宽度（屏幕上或屏幕外），如下所示：

canvas.width = 300;

无论画布和图像大小匹配如何，您可能会遇到一些子像素问题。

如果您在画布上生成的图像包含以子像素坐标绘制的图形元素或图像，则每个画布都会应用无法关闭的抗锯齿。

请参阅此文章：http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation

Answer 2

我最后通过将div放在屏幕外来隐藏div，然后正确复制了画布。