Нужно из миниатюрного холста вырезать область, и увеличить. Это работает, на большом canvas всё появляется. Не получается сразу же сохранить png. Холст не активный что ли. И картинка пустая.
код тут : https://jsfiddle.net/o9rh58vz/5/ (по отдельности)
// увеличить
document.getElementById('big').addEventListener('click',
function savePNG() {
//layerNoActive();
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
// JSON.stringify(canvas)
var json = JSON.stringify(canvas);
canvas2.loadFromJSON(json, canvas2.renderAll.bind(canvas2), function(o, object) {
if (object.type == 'rect'){
setActiveProp(object, 'opacity', 0);
} else {
var scale = 5;
var newTop = Math.round( (object.top - canvasAlignTop)*scale,4);
var newLeft = Math.round( (object.left - canvasAlignLeft)*scale,4);
// подвинуть
setActiveProp(object, 'top', newTop);
setActiveProp(object, 'left', newLeft);
// увеличить
setActiveProp(object, 'scaleX', object.scaleX*scale);
setActiveProp(object, 'scaleY', object.scaleY*scale);
}
fabric.log(o, object);
});
}
}
);
// сохранить
document.getElementById('savePNG').addEventListener('click',
function printPng(){
//layerNoActive();
canvas2.renderAll();
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
window.open(canvas2.toDataURL('png'));
}
}
);