java - 使用struts2 mvc架构如何将Canvas图像存储到服务器

Question

这是ajax调用请求

//sending request to action
var canvas=document.getElementById('can');
var dataURL = canvas.toDataURL("image/png"); 
$.ajax({    type: 'POST',  
            url: "/FMVMLAST/Canvasimage.action?img64="+dataURL.replace(/^data:image\/(png|jpg);base64,/, ""), 
            dataType: 'json', 
            async: false , 
            contentType: 'application/json; charset=utf-8', 
            success: function(data){}
});

下面的java代码将接受请求并将base64数据转换为image/png格式并将其存储到服务器。

import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.File;

import javax.imageio.ImageIO;
import javax.imageio.stream.ImageInputStream;
import javax.xml.bind.DatatypeConverter;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;


public class Canvasimage extends ActionSupport{
String img64= ServletActionContext.getRequest().getParameter("img64");


public String Canvasimage()
{
    try{
    byte[] imgData = DatatypeConverter.parseBase64Binary(img64 );
    BufferedImage bfi = ImageIO.read((ImageInputStream) new ByteArrayInputStream(imgData));    
    File outputfile = new File("saved.png");
    ImageIO.write(bfi,"png", outputfile);
    bfi.flush();

    }catch(Exception e){System.out.println("In canvas"+e.getMessage());}
    return "success";
}

public String getImg64() {
    return img64;
}

public void setImg64(String img64) {
    this.img64 = img64;
}

}

我已经在struts.xml中添加了操作

<action name="Canvasimage" class="user.actions.Canvasimage" method="Canvasimage">   
           <result type="json"></result>
</action>

每当我发出此请求时，控制台都会显示 404 错误，谁能告诉我代码中出了什么问题。

编辑

使用ajax发送请求

var canvas=document.getElementById('can');
var dataURL = canvas.toDataURL("image/png");
var data = {
        img64:dataURL.replace(/^data:image\/(png|jpg);base64,/, ""),
    };

$.ajax( 
        {   
            type: 'POST',  
            url: "/FMVMLAST/Canvasimage", 
            data:data,
            success: function(data){}
        });

struts.xml文件

<struts>

    <bean type="org.apache.struts2.dispatcher.multipart.MultiPartRequest" name="jakartaStream" class="org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest" scope="default" />
<constant name="struts.multipart.parser" value="jakarta-stream" />
<constant name="struts.multipart.maxSize" value="1000000" />
<package name="default" extends="struts-default,json-default">
     <action name="Canvasimage" class="user.actions.Canvasimage" method="Canvasimage">   
            <result type="json"></result>
    </action>
</package>

java类

import org.apache.commons.codec.binary.Base64;
import org.apache.struts2.interceptor.ServletRequestAware;

import com.opensymphony.xwork2.ActionSupport;


public class Canvasimage extends ActionSupport{

    private String img64;
    public byte[] valueDecoded;

    public String Canvasimage()
    {
        setImg64(img64);
        System.out.println(""+img64);
        try{

              byte[] decoded_id=valueDecoded;
              FileOutputStream file1 = new  FileOutputStream("C:\\image.png");




              file1.write(decoded_id);
              file1.close();

            System.out.println("incanvas"+decoded_id);
        }catch(Exception e){System.out.println("In canvas"+e);}
        return "success";
    }


    public String getImg64() {
        return img64;
    }


    public void setImg64(String img64) {
        this.img64 = img64;
        toImg64Byte();
    }


    private void toImg64Byte() {
        // TODO Auto-generated method stub
        byte[] img=img64.getBytes();
         this.valueDecoded = Base64.decodeBase64(img);
    }

}

Answer 1

为什么要在 POST 调用中通过查询字符串发送这么长的参数？ :|

使用 POST 参数:

var dataURL = document.getElementById('can').toDataURL("image/png"); 

var data = {
    img64 : dataURL.replace(/^data:image\/(png|jpg);base64,/, "")
}

$.ajax({
   type : 'POST',  
    url : "/FMVMLAST/Canvasimage.action",
   data : data
...

您可能达到了某个查询字符串长度上限，或者您发送的数据不是有效的 json，因此在发布时不带 json 数据类型。

还可以使用私有(private)限定符、公共(public) getter 和 setter 来声明变量，从而避免从请求中手动读取:

private String img64;

public String getImg64() {
    return img64;
}

public void setImg64(String img64) {
    this.img64 = img64;
}