如何在不模糊的情况下在画布上重绘调整大小？

Question

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

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

这会导致一些模糊 - 在多次调整大小后非常明显（例如：拖动以调整大小时）。我将如何在没有任何模糊的情况下做到这一点？

编辑：关闭图像平滑 (context.webkitImageSmoothingEnabled = false;) 并没有 解决问题，它只是让它重绘变得越来越锯齿，直到图像看起来不像多次调整大小后的原始版本。

在调整大小事件时调用：

    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 会扭曲像素即使它没有被缩放，并且使用实际的像素数据会更好。 如果这是真的，我找不到证据，但这无关紧要，因为他希望放大他的图像，不模糊...这是不可能的，正如我刚才提到的.