如图报了一个这样的错，百度好多都说是函数名和html元素重名的问题。可是这个问题我想我这里是不存在的
可以看到就一个绑定事件，而且id名不是关键字
报错是在$.ajax这一行，索性就把submit-info改了吧，但是还是没有用。
看错误 6处错误，有5行是jQuery.js的错误，有一处是涉及到我自己写的js错误
问题就在这了：at HTMLButtonElement.
也就是canvas加载服务器图片，没有允许跨域造成的。
关于跨域，百度的解决方案有很多，但是综合能解决的问题的屈指可数，我是没找到。因为这个问题即需要前端又需要后台，有反向代理更麻烦。所以我的解决方案是在后台把图片转成base64格式传递给前端，这样就达到了同源。java代码如下：
import sun.misc.BASE64Encoder;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
/**
* 将文件服务器图片编码为Base64
* @param url
* @return
* @throws Exception
*/
public static String encodeImageToBase64(URL url) throws Exception {
//将图片文件转化为字节数组字符串，并对其进行Base64编码处理
System.out.println("图片的路径为:" + url.toString());
//打开链接
HttpURLConnection conn = null;
try {
conn = (HttpURLConnection) url.openConnection();
//设置请求方式为"GET"
conn.setRequestMethod("GET");
//超时响应时间为5秒
conn.setConnectTimeout(5 * 1000);
//通过输入流获取图片数据
InputStream inStream = conn.getInputStream();
//得到图片的二进制数据，以二进制封装得到数据，具有通用性
ByteArrayOutputStream outStream = new ByteArrayOutputStream();
//创建一个Buffer字符串
byte[] buffer = new byte[1024];
//每次读取的字符串长度，如果为-1，代表全部读取完毕
int len = 0;
//使用一个输入流从buffer里把数据读取出来
while ((len = inStream.read(buffer)) != -1) {
//用输出流往buffer里写入数据，中间参数代表从哪个位置开始读，len代表读取的长度
outStream.write(buffer, 0, len);
}
//关闭输入流
inStream.close();
byte[] data = outStream.toByteArray();
//对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
String base64 = encoder.encode(data);
System.out.println("网络文件[{}]编码成base64字符串:[{}]"+url.toString()+base64);
return base64;//返回Base64编码过的字节数组字符串
} catch (IOException e) {
e.printStackTrace();
throw new Exception("图片读取失败,请联系客服!");
}
}
什么前端图片加载不出来，what？这个base64是纯字符串，请给它加上22位前缀data:image/png;base64,
img.src="data:image/png;base64,"+base64;
解决了跨域的问题，图片加载和修改都可以了。
然而问题还在继续，但是这次有进展能向后台发送请求了，只是ajax请求的data参数是Object
最后问题找到在ajax传递的参数中用了关键字 length和width,但是奇怪的是上一个页面用的相同的方法就行，这个页面就不行了。
上个页面只是多了个form表单，好吧闲话不多说。在html中把关键字改名，ajax提交成功了，进了后台。
但是问题又来了，后台接收不到数据，走了很多弯路。解决办法是把jquery-3.3.1.min.js换成jquery-1.8.3.min.js
搞定
真是一波三折啊，程序猿一般人真干不了！