6

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

  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 );
         */
    }

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

4

2 回答 2

3

不是从原始画布中获取渲染图像，而是实际重绘图像。我的意思是执行与原始画布相同的逻辑，但所涉及的点缩放到新的大小。

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

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

于 2013-10-09T23:13:43.027 回答
-2

编辑二：最初的答案是无关紧要的，尽管我所做的评论是相关的，现在正在推广它并将其编辑为一个答案......而且我给出的答案并不是那么好**。

当然，如果您放大光栅图形，即从具有较小像素尺寸的图像，创建具有较高像素尺寸的图像，您将得到模糊的图像。通过放大，您正在制作高分辨率的低分辨率图片，但没有高分辨率细节。

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

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

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

于 2013-10-10T04:03:04.073 回答