画布上的重绘如何调整大小而不模糊？

Question

调整canvas元素的大小（通过样式更改）时，我也想缩放画布的绘制图像。 我不能只改变高度/宽度，因为这会导致画布自行清除，所以我这样做：

1. 创建临时画布元素
2. 将当前画布的图像绘制到该临时画布上
3. 调整当前画布的大小
4. 将临时画布的图像绘制回当前画布，但缩放到新大小

这会导致一些模糊 - 在许多调整大小后非常明显（例如：拖动以调整大小时）。 如果没有任何模糊，我该怎么做？

编辑：关闭图像平滑（ context.webkitImageSmoothingEnabled = false; 不解决这个问题，它只是让重绘越来越参差不齐，直到图像数量调整大小后，看上去一点也不像原来的。

调用resize事件：

    var tmpCanvas = null;       

    //Make a temporary canvas
    tmpCanvas = document.createElement( "canvas" );

    //Set its size to be equal
    tmpCanvas.height = originalCanvas.height;
    tmpCanvas.width = originalCanvas.width;

    //Draw our current canvas onto it
    tmpCanvas.getContext( "2d" ).drawImage( originalCanvas, 0, 0 );

    //Set new dimensions
    originalCanvas.width = originalCanvas.offsetWidth;
    originalCanvas.height = originalCanvas.offsetHeight;

    var originalContext = originalCanvas.getContext( "2d" );

    //Set background and colors
    originalContext.fillStyle = "#ffffff";
    originalContext.strokeStyle = "#000000";

    //Set paintbrush
    originalContext.lineWidth = 4;
    originalContext.lineCap = "round";

    //Fill background as white
    originalContext.fillRect( 0, 0, originalCanvas.width, originalCanvas.height );

    //We have a saved signature
    if ( SignatureCanvas.hasSignature === true )
    {
        //Draw it back but scaled (results in blurred image)
        originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, originalCanvas.width, originalCanvas.height );

        /** 
         * This results in a blurred image as well
         //Draw it back but scaled
         originalContext.scale( originalCanvas.width / tmpCanvas.width, originalCanvas.height / tmpCanvas.height );
         originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, tmpCanvas.width, tmpCanvas.height );
         */
    }

有没有办法获得笔画并“缩放”所有这些点并重绘？

Answer 1

实际上重绘图像，而不是从原始画布中获取渲染图像。 通过这种方式，我的意思是执行你对原始画布执行的相同逻辑，但是涉及的点被缩放到新的大小。

如果可以，请考虑使用SVG。 它的性质很好地扩展。

编辑：我想到的另一个选择是简单地使用一个巨大的画布开始。 尺寸减小往往看起来比尺寸更好，特别是在平滑时。

Answer 2

编辑二：原来的答案是无关紧要的，虽然我所做的评论是相关的，现在我正在推广并编辑它作为答案......而且我给出的答案并不是那么好 ** **。

当然，如果您放大光栅图形，即从像素尺寸较小的像素，创建具有更高像素尺寸的图像，您将获得模糊的图像。 通过按比例放大，您可以制作低分辨率图像的高分辨率，但没有高分辨率的细节 。

除非你对光栅图像做出多个额外的假设，例如你看到的唯一灰色是在图像边缘处，或者角落只能出现在连接曲线的切线之间的角度的明显拐点处，否则绝对没有办法解决这种模糊问题。必须是100度或更低。 基本上，您必须提供其他信息，以便您的更高分辨率的图像可以填写“填写”的详细信息。 与光栅中的SVG逆向工程并不完全不同。

所以，你似乎想要模拟缩放矢量图形 ，其中唯一的解决方案是保存命令，绘制SVG，或绘制到像Stuart Branham建议的更大的画布。

**我最初提出，调用drawImage会使像素失真， 即使它没有缩放 ，并且最好使用实际的像素数据。 如果这是真的，我找不到证据 ，但这是无关紧要的，因为他希望他的图像按比例放大， 而不会模糊 ......这是不可能的，正如我刚才提到的那样。