Содержимое холста как изображение высокого разрешения.

Question

Я использую KonvaJS в моем проекте. Мне нужно сохранить stage/canvas как изображение (было бы здорово, если экспортировано изображение с высоким разрешением изображения). KonvaJS имеет функцию, называемую stage.toDataURL(), которая возвращает содержимое холста в качестве строки Base64. Задача этой функции состоит в том, что она возвращает только видимую область холста. Мне нужно экспортировать весь холст в качестве изображения не только в видимой области. Я пробовал с Canvas2Image, но он также сохраняет только видимую область не полный холст. Есть ли способ, которым я могу это достичь? Вот plunkr, чтобы играть с кодом poc (proof of concept).

var width = window.innerWidth; 
var height = window.innerHeight; 

var stage = new Konva.Stage({ 
    container: 'container', 
    width: width, 
    height: height 
}); 

var layer = new Konva.Layer(); 

var rectX = stage.getWidth()/2 - 50; 
var rectY = stage.getHeight()/2 - 25; 

(function() { 
    for (var i = 0; i < 50; i++) { 
    layer.add(new Konva.Rect({ 
     x: i * 50, 
     y: 0, 
     width: 50, 
     height: 10000, 
     fill: Konva.Util.getRandomColor() 
    })); 
    } 
})(); 

var box = new Konva.Rect({ 
    x: rectX, 
    y: rectY, 
    width: 100, 
    height: 50, 
    fill: '#00D2FF', 
    stroke: 'black', 
    strokeWidth: 4, 
    draggable: true 
}); 

box.on('mouseover', function() { 
    document.body.style.cursor = 'pointer'; 
}); 

box.on('mouseout', function() { 
    document.body.style.cursor = 'default'; 
}); 

layer.add(box); 
layer.draw(); 
stage.add(layer); 

function exportCanvas() { 
    var dataURL = stage.toDataURL(); 
    window.open(dataURL); 
} 

document.getElementById('save').addEventListener('click', exportCanvas, false); 

Answer 1

Лучший способ добиться этого, чтобы изменить размер сцены перед экспортом, а затем изменить его обратно:

var oldSize = stage.size(); 

var exportSize = { 
    width: 3000, 
    height: 3000 
}; 
stage.size(exportSize); 
stage.draw(); 
var dataURL = stage.toDataURL(exportSize); 
stage.size(oldSize); 
stage.draw(); 

Демо: http://plnkr.co/edit/DiqsE7rZdDx3JIAyJZQK?p=preview