javascript - 如何在不模糊的情况下在 Canvas 上重绘调整大小？

Question

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

1. 创建一个临时 Canvas 元素
2. 将当前 Canvas 的图像绘制到临时 Canvas 上
3. 调整当前 Canvas 的大小
4. 将临时 Canvas 的图像绘制回当前 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

不是从原始 Canvas 中获取渲染图像，而是重新绘制图像。也就是说，我的意思是执行您对原始 Canvas 执行的相同逻辑，但所涉及的点会缩放到新的大小。

如果可以，请考虑改用 SVG。它本质上可以很好地扩展。

编辑:我想到的另一个选择是简单地使用一个巨大的 Canvas 开始。缩小尺寸往往比放大尺寸看起来更好，尤其是在启用平滑的情况下。