Json 序列化已为小viewscreen缩放的画布

我按照文档中的示例创建了一个响应画布：

用户能够将画布保存到其库中；我创建了一个JSON文本文件和画布的PNG。PNG用于在用户库中显示保存的画布，Json用于在从库中选择画布时加载画布

我的问题是画布是基于当前响应大小保存的，但我需要保存的版本是

500 x 667

的默认

width x height

下面是我缩放画布的代码：

function fitStageIntoParentContainer() {
    var stageParent = document.querySelector('#stage-parent');
    // now we need to fit stage into parent
    var stageParentWidth = stageParent.offsetWidth;
    // to do this we need to scale the stage
    var scale = stageParentWidth / width;
    if ((width * scale) < width) {
        stage.width(width * scale);
        stage.height(height * scale);
        stage.scale({ x: scale, y: scale });
        stage.draw();        
    }
}

在得到Json和PNG之前，我尝试过改变舞台的宽度、高度和比例，但最终得到的是一个空白的PNG

以下是我尝试的代码：

function saveLabel($title, $continue) {
    var elGrid = stage.find('.gridlayer');
    if (elGrid.length) elGrid.destroy();

    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: 0, y: 0 });
    stage.draw();
    var $json = stage.toJSON();
    var $dataURL = stage.toDataURL('image/png');
    console.log($json);
    console.log($dataURL);
    stage.setWidth(currentWidth);
    stage.setHeight(currentHeight);
    stage.scale({ x: currentXScale, y: currentYScale });
    stage.draw();

    //console.log(json);
    saveLabelAjax($json, $dataURL, $title, $continue, label_maker);
}

---

任何帮助都将不胜感激。

更新：我更改了“stage.scale（{x:0，y:0}）；”到“stage.scale（{x:1，y:1}）；”我不再得到一个空白的PNG，但我的PNG不是保存在500 x 667，而是保存在625 x 833。我用500和667替换了宽度和高度变量，但仍然将PNG保存为625x833。PNG用于打印瓶子的标签，大小需要为500 x 667。宽度是多少？它等于什么？宽度设置为500<代码>变量宽度=500；var高度=667代码看起来不错。如果你能创建一个可复制的小演示，我可能会有所帮助。更新：我更改了“stage.scale（{x:0，y:0}）；”到“stage.scale（{x:1，y:1}）；”我不再得到一个空白的PNG，但我的PNG不是保存在500 x 667，而是保存在625 x 833。我用500和667替换了宽度和高度变量，但仍然将PNG保存为625x833。PNG用于打印瓶子的标签，大小需要为500 x 667。宽度是多少？它等于什么？宽度设置为500<代码>变量宽度=500；var高度=667代码看起来不错。我可能会帮助你，如果你能创建一个小的可复制的演示。

function saveLabel($title, $continue) {
    var elGrid = stage.find('.gridlayer');
    if (elGrid.length) elGrid.destroy();

    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: 0, y: 0 });
    stage.draw();
    var $json = stage.toJSON();
    var $dataURL = stage.toDataURL('image/png');
    console.log($json);
    console.log($dataURL);
    stage.setWidth(currentWidth);
    stage.setHeight(currentHeight);
    stage.scale({ x: currentXScale, y: currentYScale });
    stage.draw();

    //console.log(json);
    saveLabelAjax($json, $dataURL, $title, $continue, label_maker);
}