以更高分辨率保存 html5 画布图像

Posted 2023-03-05

【中文标题】以更高分辨率保存 html5 画布图像

【英文标题】：saving a html5 canvas image in higher resolution

【发布时间】：2013-04-11 05:00:35

【问题描述】：

我正在创建一个允许用户使用 html5 和 canvas 元素创建场景的网站。

我打算为此使用KinecticJS，它看起来很棒。但我有一个问题我真的很苦恼。

由于我希望能够为用户提供更高质量的打印场景版本，因此我不能只给他们 800x600 像素的画布数据，因为打印时它会变得非常模糊。

我看到一些论坛建议简单地“扩大”您的canvas，然后保存该输出，但我担心这样做的性能成本。虽然这可能是我唯一的希望。

由于 KineticJS 使用图形层次来渲染场景，我认为可以使用 KinecticJS 创建场景，然后重新渲染（而不是缩放）相同的场景，只是这次放大位置等。 . 场景中的所有对象。

以前有没有人做过这样的事情？到目前为止，我仍处于研究阶段。

请注意，我显然了解 SVG，但我需要更大的浏览器支持，而且 IE 在 IE9 之前使用 VML，我严重怀疑我能否将 SVG/VML 场景转换为 PNG 并保持浏览器支持。

【参考方案1】：

您可以为单个“捕获帧”放大画布。

你有一个绘图函数或一个渲染函数。给它一个论点，如果该论点是正确的，请参考更大的背景。

var canvas, context; //you already have these
var newCanvas, newContext; //I'm making these
var scaleFactor = 2; //How much we scale?
var ctx; //Identify's which context to draw to....

function render(screenShot)
    ctx = context;
    if(screenShot)
        if(!newCanvas)
            newCanvas = document.createCanvas();
            newContext = newCanvas.getContext('2d');
        
        newCanvas.width = canvas.width * scaleFactor;
        newCanvas.height = canvas.height * scaleFactor;

        ctx = newContext;
        newContext.scale(scaleFactor, scaleFactor); //Now all your previous drawing will autoscale
    

    /*   all your old draw code goes here, 
    change all your context calls to ctx */

    if(screenShot)
        YourNewHighResSuperCoolSnapShotData = newCanvas.toDataURL("image/png");
    

您可能想了解 toDataURL 的工作原理，以及它将为您提供什么。

这不会造成损失，因为您只需要在需要高质量的时候调用 render(true)

【讨论】：

所以我想我唯一需要注意的就是在绘制之前将我正在绘制的任何图像对象（静态 PNG）更改为更高分辨率的版本，然后再将它们切换回来...（避免非矢量对象的像素化）？

【参考方案2】：

对此我有另一个答案：

function makeBig(firstStage) 
    newStage.setScale(2);
    newStage.add(firstStage.getChildren()[0].clone());

这对我有用，一旦你知道怎么做就很容易了:)

【讨论】：

嘿，你认为你可以提供一些关于你在这里发布的解决方案的额外细节，即分别是什么类型的元素是 firstStage 和 newStage。

当然，firstStage 是页面上已经存在的 KineticJS 舞台元素，newStage 是我以编程方式创建并缩放的新创建的舞台