KonvasJs: высота и ширина изображения теряются при сохранении сцены холста в строку JSON

Question

Я разрешаю пользователю загружать изображение на холст; при создании Konvas.Image я устанавливаю атрибуты высоты и ширины на основе изображений naturalHeight и naturalWidth.

Загрузить код:

function loadImageStep1(src) {        
    var imgKI = new Konva.Image({
        x: 0,
        y: 0,
        name: 'step1-label',
        id: 'step1-label'
    });

    layer1.add(imgKI);
    stage.add(layer1);//Add layer to stage.

    var layer1Img = stage.find('.step1-label');
    var reader = new FileReader();
    reader.onload = function(event) {
        img = new Image();
        img.onload = function() {
            imgKI.image(img);
            layer1.draw();
            layer1Img.setAttr('width', this.naturalWidth);
            layer1Img.setAttr('height', this.naturalHeight);                 
            layer1.draw();
        }
        img.src = event.target.result;//event.target.result
        layer1Img.setAttr('src', event.target.result);        
    }
    reader.readAsDataURL(src);

    return false;
}

Когда я сохраняю холст в строку JSON, высота и ширина изображения исчезают. Я сохранил объект Konva.Image в переменную и добавил в журнал консоли, чтобы убедиться, что атрибуты присутствуют. Снимок экрана журнала консоли

Вот строка JSON, предоставленная функцией stage.toJSON(); обратите внимание, что высота и ширина для объекта изображения "step1-label" отсутствуют.

{ "ATTRS":{"ширина":500,"высота":667,"идентификатор": "ярлык-мейкера", "заполнить":"# ДДД"},"Classname": "Сцена", "дети":[{"ATTRS":{"ID": "фон", "название": "фон"},"имя класса": "Слой", "дети":[{"ATTRS":{"ширина": 500," высота ": 667," заполнить ":" # FFFFFF "}," имя класса ":"Rect"}]},{" ATTRS ": {" ID ":"layer1","имя":"layer1"}," имя класса ":" слой", "дети":[{"ATTRS":{"х":100,"Y":180,"название": "шаг1-метка", "идентификатор": "шаг1-метка","src":"[УДАЛЕНО, ЧТОБЫ СДЕЛАТЬ СТРОКУ МАЛЕНЬКОЙ]","scaleX":"1.72","scaleY":"1.72"},"className":"Image"}]},{"attrs":{"id":"layer3","название":"layer3"},"имя класса": "Слой", "дети":[{"ATTRS":{"ID": "", "название txtGroup1":"txtGroup1","перетаскивание": правда, "х":-5,"у":202},"имя класса": "Группа", "дети":[{"ATTRS":{"х":250,"у":333,5,"text":"Fine Dinning \nSpecial Preserve","fontSize":"50","fontFamily":"Great Vibes","fill":"#000000","name":"text1","id":"текст1", "выравнивание": "центр", "LineHeight":"1","FontStyle":"жирным шрифтом", "OffsetX": +203,81988525390625},"имя класса": "Текст"}]}]}]}

Вот моя работа по этому вопросу. Я должен был получить объекты изображения и добавить высоту и ширину к строке JSON. Это просто, потому что мы разрешаем добавлять на холст только два изображения.

function saveLabel($title, $continue) {
    //Get current width, height and scale settings for the canvas. Use these values to reset once the canvas has beeen saved.
    var currentWidth = stage.width();
    var currentHeight = stage.height();
    var currentXScale = stage.scaleX();
    var currentYScale = stage.scaleY();
    stage.setWidth(width);
    stage.setHeight(height);
    stage.scale({ x: 1, y: 1 });
    stage.draw();
    var $json = stage.toJSON();
    //The Konvas library is dropping the height and width of the images when creating the json string, so we have to put them back in...   
    var layer1Img = stage.find('.step1-label');
    var layer2Img = stage.find('.custom');
    if (layer1Img.length) {
        $json = $json.replace('"id":"step1-label"','"id":"step1-label","height":' + layer1Img[0]["attrs"].height + ',"width":' + layer1Img[0]["attrs"].width);
    }
    if (layer2Img.length) {
        $json = $json.replace('"id":"custom"','"id":"custom","height":' + layer2Img[0]["attrs"].height + ',"width":' + layer2Img[0]["attrs"].width);
    }    
    var $dataURL = stage.toDataURL('image/png');   

    //Set the canvas back to original settings now that it's been saved.
    stage.setWidth(currentWidth);
    stage.setHeight(currentHeight);
    stage.scale({ x: currentXScale, y: currentYScale });
    stage.draw();

    saveLabelAjax($json, $dataURL, $title, $continue, label_maker, window.location.hash);
}

Есть ли что-то, что мне не хватает в моем коде; я правильно устанавливаю атрибуты изображения?

Мне нужна высота и ширина изображения для функции вращения, и когда я загружаю холст из JSON, функции вращения не работают правильно из-за этих отсутствующих данных.

Answer 1

Я нашел, почему у вас нет width а также height в формате JSON.

Преобразовывая Konva.Node JSON Конва пытается сделать его как можно более минимальным. Например, он сохраняет значения по умолчанию (для x и y in будет 0).

В твоем случае width атрибут Konva.Image равна естественной ширине исходного изображения, которое вы используете. Так что это бесполезно в JSON.

Когда вы восстанавливаете сцену из JSON, вам нужно просто загрузить собственные изображения и установить их в Konva.Image экземпляров.