Question

我正在开发一个Web应用程序，用户可以选择一个图像，裁剪它并最终将其上传到服务器。因此，使用FileUpload小部件，我允许用户选择图像源，获取其路径并使用构造函数

Image(java.lang.String url, int left, int top, int width, int height);

我得到了裁剪的图像对象。

但是现在，我不知道如何将图像上传到服务器。有人知道解决方案吗？

Answer 1

您可以找到有关如何将文件上传到服务器here的好例子。

修改

您需要做的是将图像上传到服务器，在客户端中检索图像，在客户端中进行可视化裁剪，将裁剪参数发送到服务器，最后在服务器中进行实际裁剪。这就是我从上面提到的项目开始的方法：

vPanel.add(new Button("Submit", new ClickHandler() {
    public void onClick(ClickEvent event) {
           form.submit();
    }
}));

一旦用户选择了一个图像，我们就用FileUpload上传它，并在服务器中将它保存在一个目录中：

List<FileItem> items = fileUpload.parseRequest(request);
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
    FileItem item = (FileItem) iter.next();    
    File file = new File(<images-path>,fileName);
    Streams.copy(item.getInputStream(),new FileOutputStream(file), true);        
}

我们需要有一个服务来检索上传的图像，所以我们添加了一个带有get方法并返回图像的servlet：

protected void doGet(HttpServletRequest req,
        HttpServletResponse resp) throws ServletException,
        IOException
{
    resp.setContentType("image/jpeg");
    ServletOutputStream out = resp.getOutputStream();
    BufferedInputStream  bis= new BufferedInputStream(new FileInputStream(<images-path>+req.getParameter("name")));
    BufferedOutputStream bos = new BufferedOutputStream(resp.getOutputStream());
    int ch;
    while((ch=bis.read())!=-1)
    {
        bos.write(ch);
    }
    bis.close();
    bos.flush();
    bos.close();
    out.close();
}

在上传完成后返回客户端，我们想要检索上传图像的副本，以便我们添加表单提交处理程序。我正在使用此gwt cropping library进行可视化步骤：

form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler()
{
    public void onSubmitComplete(SubmitCompleteEvent event)
    {
        Element label = DOM.createLabel();
        label.setInnerHTML(event.getResults());
        String result = label.getInnerText(); // result contains the name of the image in the server
        final GWTCropper crop = new GWTCropper(GWT.getModuleBaseURL()+"image?name="+result);
        crop.setAspectRatio(1);
        vPanel.add(crop);
    }
}

现在我们必须添加一个裁剪服务，让我在服务器中进行实际裁剪，我使用RCP服务来执行此操作：

public class CropServiceImpl extends RemoteServiceServlet implements CropService {
    public Boolean crop(String name, int x, int y, int width, int height)
    {
        try
        {
            BufferedImage outImage = ImageIO.read(new File("<images-path>"+name));
            BufferedImage cropped = outImage.getSubimage(x, y, width, height);
            ImageIO.write(cropped, "jpg", new File("<images-path>","cropped"+name));
            return true;
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
        return false;
    }
}

最后，回到客户端，我们使用我们从裁剪中获得的参数调用按钮操作中的方法：

vPanel.add(new Button("Crop", new ClickHandler()
{
    public void onClick(ClickEvent event)
    {
        cropService.crop(getName(), (int) crop.getSelectionXCoordinate(),
                (int) crop.getSelectionYCoordinate(), (int) crop.getSelectionWidth(),
                (int) crop.getSelectionHeight(), new AsyncCallback<Boolean>()
                {
                    public void onFailure(Throwable arg0)
                    {
                        // something went wrong with the call
                    }
                    public void onSuccess(Boolean arg0)
                    {
                    if (arg0)
                        {
                            // the cropped file now lives in the server
                        }
                        else
                        {
                            // an error happened in the server
                        }
                    }
                });
    }
}));

然后你去了，对不起这篇长篇文章，希望它有所帮助。

在GWT中上传裁剪的图像

1 个答案: