Question

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

我打算使用KinecticJS，看起来很棒。但我有一个问题，我真的在努力。

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

我看到一些论坛建议只是“扩展”你的canvas，然后保存输出，但我担心这会带来性能成本。虽然这可能是我唯一的希望。

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

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

一个注意事项，显然我知道SVG，但我需要更大的浏览器支持，IE在IE9之前使用VML，我很怀疑我可以将SVG / VML场景转换为PNG并保持浏览器支持。

Answer 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");
    }
}

您可能想查看如何使用DataURL以及它将给您带来什么。

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

Answer 2

我有另一个答案：

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

这对我有用，一旦你知道如何就很容易：）

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

2 个答案: