Question

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

创建临时画布元素
将当前画布的图像绘制到该临时画布上
调整当前画布的大小
将临时画布'图像绘制回当前画布，但缩放到新尺寸

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

编辑关闭图像平滑（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

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

当然如果你放大光栅图形，也就是说，从像素尺寸较小的像素，创建一个像素尺寸较高的图像，你将得到模糊的图像。通过按比例放大，您可以制作低分辨率图像的高分辨率，但没有高分辨率细节。

除非你对光栅图像做出多个额外的假设，例如你看到的只有灰色的图像边缘，或者角落只能出现在切线角度之间的角度，角落只能出现这种模糊性。连接的曲线必须为100度或更小。基本上，您必须提供其他信息，以便您的更高分辨率的图像可以填写“填写”的详细信息。与光栅中的SVG逆向工程并不完全不同。

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

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

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

2 个答案: