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

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以及它将给您带来什么.

这不会造成损失,因为当您需要高质量的渲染时,您只需要调用渲染(true)