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对象保存到变量并添加到控制台日志以验证属性是否存在。 Screen Shot of Console Log

这是stage.toJSON（）函数提供的JSON字符串;请注意，“step1-label”图像对象的高度和宽度不存在。

{ “ATTRS”：{ “宽度”：500， “高度”：667， “ID”： “标签制造者”， “填充”： “＃DDD”}， “类名”： “阶段”，”儿 “：[{” ATTRS “：{” ID “：” 背景”， “名称”： “背景”}， “类名”： “层”， “孩子”：[{ “ATTRS”：{ “宽度”： 500， “高度”：667， “补”： “＃FFFFFF”}， “类名”： “矩形”}]}，{ “ATTRS”：{ “ID”： “layer1的”， “名”： “layer1的” }， “类名”： “层”， “孩子”：[{ “ATTRS”：{ “×”：100， “Y”：180， “姓名”： “步骤1标记”， “ID”：“step1- label“，”src“：”[删除使字符串更小]“，”scaleX“：”1.72“，”scaleY“：”1.72“}，”className“：”Image“}]}，{”attrs“： { “ID”： “三层”， “名”： “三层”}， “类名”： “层”， “孩子”：[{ “ATTRS”：{ “ID”： “txtGroup1”， “名”：” txtGroup1" ， “拖动”：真， “×”： - 5， “Y”：202}， “类名”： “组”， “孩子”：[{ “ATTRS”：{ “×”：250，“Y “：333.5，”text“：”Fine Dinning \ nSpecial Preserve“，”fontSize“：”50“，”fontFamily“：”Great Vibes“，”fill“：”＃000000“，”name“：”text1“， “ID”： “文本1”， “对齐”： “中心”， “lineHeight是”： “1”， “fontStyle”： “加粗”， “OFFSETX”：203.81988525390625} “的className”： “文本”}]}] }]}

这是我解决这个问题的方法。我必须获取图像对象并将高度和宽度添加到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

我找到了JSON中没有width和height的原因。

将Konva.Node转换为JSON时，Konva正试图尽可能减少它。例如，它会保存默认值（对于x和y，将为0）。

在您的情况下，width Konva.Image属性等于您使用的原生图像的自然宽度。所以它在JSON中没用。

从JSON还原舞台时，您只需加载原生图像并将其设置为Konva.Image个实例。

KonvasJs：将画布阶段保存为JSON字符串时图像高度和宽度丢失

1 个答案: