Question

我为图像裁剪器实现了一个自定义控件，可以在内容部分的媒体项上打开叠加层。现在我可以使用叠加显示并且可以调整作物，但是当我选择“保存裁剪”时，更改不会持续存在。如果我在媒体部分使用图像裁剪器，则正在进行更改。

我通过belle docs查看了媒体资源的保存功能，但它似乎对我没用。

文档说首先获取id，然后保存在回调中：

    mediaResource.getById(1234)
       .then(function(media) {
             media.name = "I want a new name!";
             mediaResource.save(media, false)
               .then(function(media){
                   alert("Retrieved, updated and saved again");
               });
       });

在我的叠加层对象中，我有这个提交功能：

submit: function (model) { //when user clicks save crops button
                    $scope.overlay.saving = true;
                    mediaResource.getById($scope.images[0].udi)
                        .then(function (media) {
                            media.umbracoFile = $scope.overlay.value;
                            mediaResource.save(media, false, []).then(function (media) { //save changes to media item, or craete if new

                                console.log("On saving start end:", $scope);
                                $scope.overlay.saving = false;
                                $scope.overlay.show = false;
                                notificationsService.remove(0);
                                notificationsService.success("The crops for '" + media.name + "' have been saved");
                            });
                        });
                }

当我点击调出提交功能的“保存裁剪”时，我没有得到任何错误响应，但是没有保存更改。我不确定我需要在媒体对象上执行哪些操作才能正确保存我的更改。

Answer 1

好的，我想我知道你的意思。默认情况下，Image的umbracoFile属性使用ImageCropper数据类型，该数据类型将所有图像和裁剪信息存储在具有以下格式的JSON字符串中：

{
"src":"/media/1050/Image1.jpg",
"focalPoint":{"left":0.5,"top":0.5},
"crops":[
    {"alias":"crop1",
    "width":500,
    "height":800,
    "coordinates":{
        "x1":0.30206315789473687,
        "y1":0.0,
        "x2":0.28148947368421051,
        "y2":0.0}
        }
    ]
}

您可以将umbracoFile属性显示为字符串：

var data = image.GetPropertyValue("umbracoFile").ToString();

因此传递给提交函数的模型必须重新创建所有这些结构和值。

保存使用图像裁剪器对媒体项进行的更改

1 个答案: