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

Posted 2023-02-25

【中文标题】尝试使用 Jcrop 和使用 scala Scrimage lib 调整服务器端图像大小

【英文标题】：Trying to make use of Jcrop and serverside image resizing with scala Scrimage lib

【发布时间】：2014-01-23 14:43:51

【问题描述】：

我正在尝试将 jcrop 和 scrimage 结合起来，但我无法理解 scimage 的文档。 用户上传图片。上传完成后，用户可以选择一个固定的 使用 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
                        );
                    
                
            );
        );

示例：

当用户满意时，坐标将被发布到服务器上，魔法应该发生的地方。

控制器：

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 和 resize：

将画布调整为给定尺寸。这不会缩放 图像，但只是改变了画布的尺寸， 图像是坐着。指定更大的尺寸将用 背景颜色并指定较小的尺寸将裁剪图像。 这是大多数人想到crop时想要的操作。

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

感谢您提供两个很棒的库！

【参考方案1】：

子图像是你想要的。这使您可以指定坐标而不是偏移量。

这么简单，

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

【讨论】：

太棒了！但是用 image.subimage(x1,y1,w,h) 升级你的答案，我会把它标记为正确的！