Question

我正在尝试将 jcrop 和 scrimage 结合起来，但我在理解上遇到了麻烦 scrimage的文档。用户上传图像。上传完成后，用户可以选择固定的用Jcrop裁剪的区域：

upload.js

      $(function () {
            $('#fileupload').fileupload({
                dataType: 'json',                    
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $("#progress").find(".progress-bar").css(
                        "width",
                        progress + "%"
                    );
                },
                done: function (e, data) {
                    $("#cropArea").empty();
                    var cropWidth = 210;
                    var cropHeight = 144;
                    if(data.result.status == 200) {
                        var myImage = $("<img></img>", {
                            src: data.result.link
                        }).appendTo('#cropArea');
                        var c = myImage.Jcrop({
                            allowResize: false,
                            allowSelect: false,
                            setSelect:[0,0,cropWidth,cropHeight],
                            onSelect: showCoords
                        });
                    }
                }
            });
        });

示例：

Cropped Area

当用户满意时，坐标将被发布到服务器，并且魔法应该发生在哪里。

控制器：

def uploadFile = Action(multipartFormDataAsBytes) { request =>
    val result = request.body.files.map {
      case FilePart(key, filename, contentType, bytes) => {
        val coords = request.body.dataParts.get("coords")
        val bais = new ByteArrayInputStream(bytes)
        Image(bais).resize(magic stuff with coords)

        Ok("works")
      }
    }
    result(0)
  }

如果我阅读docs scrimage 并调整大小：

将画布调整为给定尺寸。这不会缩放图像，但只是改变画布的尺寸图像正在坐着。指定较大的尺寸将使用a填充图像背景颜色和指定较小的尺寸将裁剪图像。这是大多数人想到作物时想要的操作。

但是当尝试使用输入流Image(is).resize()实现调整大小时，我不确定我该怎么做。调整大小有一个scaleFactor，位置和颜色...我想我应该使用我从jcrop获得的坐标填充位置，我该如何处理scaleFactor？任何人都有一个如何做到这一点的好例子？

感谢您使用两个很棒的库！

Answer 1

Subimage就是你想要的。这允许您指定坐标而不是偏移。

如此简单，

val image = // original
val resized = image.subimage(x,y,w,h) // you'll get these from jcrop somehow

尝试使用scala Scrimage lib来使用Jcrop和服务器端图像大小调整

1 个答案: