使用java、html5以及wPaint实现在线编辑图片并保存到FTP中的功能，在线图片为iis服务
文件准备wPaint
下载链接：https://download.csdn.net/download/xiaozukun/11097326
1、配置图片服务器，进入insertnet信息服务（iis）管理器，右键网站，选择属性，切换到HTTP 头
点击点击按钮，增加三条信息：
1）X-Powered-By 对应值 ASP.NET
2）Access-Control-Allow-Headers 对应值 Content-Type,api_key,Authorization
3）Access-Control-Allow-Origin 对应值 *
配置http头
iis 其他配置不做详解，
2、图片访问服务端代码，关键代码说明（如红色字说明）：
getImage: function()
{
this.canvasSave = document.createElement('canvas');
this.ctxSave = this.canvasSave.getContext('2d');
$(this.canvasSave).css({display:'none', position: 'absolute', left: 0, top: 0}).attr('width', $(this.canvas).attr('width')).attr('height', $(this.canvas).attr('height'));
//if a bg image is set, it will automatically save with the image
if(this.canvasBg) this.ctxSave.drawImage(this.canvasBg, 0, 0);
this.ctxSave.drawImage(this.canvas, 0, 0);
//if a bg image is set, it will automatically save with the image
return this.canvasSave.toDataURL();
},
setImage: function(data, addUndo)
{
var _self = this;
var myImage = new Image();
/*myImage.onload = function() {
context.drawImage(this, 40, 40);
// call next step in your code here, f.ex: nextStep();
};*/
_self.ctx.clearRect(0, 0, _self.canvas.width, _self.canvas.height);
$(myImage).load(function(){
_self.ctx.drawImage(myImage, 0, 0);
if(addUndo) { _self.addUndo(); }
});
myImage.crossOrigin = '';//与下一句代码实现效果一致
//myImage.setAttribute('crossOrigin', 'Anonymous');//图片跨域问题解决方案 当使用canvas绘制网络图片的时候，经常会出现“Tainted canvases may not be exported”报错
myImage.src = data.toString();
},
setBgImage: function(data, addUndo)
{
var _self = this;
var myImage = new Image();
/*myImage.onload = function() {
context.drawImage(this, 40, 40);
// call next step in your code here, f.ex: nextStep();
}; */
_self.ctxBg.clearRect(0, 0, _self.canvasBg.width, _self.canvasBg.height);
$(myImage).load(function()
{
_self.ctxBg.drawImage(myImage, 0, 0);
});
myImage.crossOrigin = '';//与下一句代码实现效果一致
//myImage.setAttribute('crossOrigin', 'Anonymous');//图片跨域问题解决方案 当使用canvas绘制网络图片的时候，经常会出现“Tainted canvases may not be exported”报错
myImage.src = data.toString();
},
界面保存图片数据逻辑
function saveImage(url){
var imageData = $("#wPaint").wPaint("image");
var data ={};
data.imageData = imageData.split(',')[1];
var dataj = JSON.stringify(data);
//alert( dataj.length);
$.ajax({
url: url,
data: dataj,
dataType:"json",
type:"post",
contentType: 'text/json',
success: function (data) {
reslist=data.result;
if(reslist==1){
alert('保存成功！');
return;
}else{
alert(data.msg);
return;
};
},
error: function (jqXHR, textStatus, errorThrown) {
mini.unmask(document.body);
alert("出错啦");
//alert(jqXHR.responseText);
return;
}
});
}
3、java代码实现保存图片到FTP服务器上 web客户端采用ajax与服务端交互
引用的类
import net.sf.json.JSONObject;
import sun.misc.BASE64Decoder;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import sun.net.TelnetInputStream;
import sun.net.TelnetOutputStream;
import sun.net.ftp.FtpClient;
import java.io.DataOutputStream;
实现方法如下：
/**
* 将64base文件转图片输出然后上传到ftp
* @param bast64Str 图片数据
* @param path 上传的路径
* @param ip ftp ip地址
* @param username ftp账号
* @param password ftp密码
* @param port ftp 端口号
* @param toname ftp上保存的图片文件名
* @param extName ftp保存的图片文件后缀名
* @return json字符串
*/
public static String base64ToBytesToFTP(String bast64Str,String path,String ip,String username,String password,int port,String toname,String extName ) {
BASE64Decoder decoder = new BASE64Decoder();
JSONObject re = new JSONObject();//JSONObject RoadTest = JSONObject.fromObject(jsonStr).getJSONObject("data");
try {
if(null==bast64Str||"".equals(bast64Str)){
re.put("result", "0");
re.put("msg", "图片数据为空!");
return re.toString();
}
byte[] bytes = decoder.decodeBuffer(bast64Str);
//调整异常数据
for (int i = 0; i < bytes.length; ++i) {
if (bytes[i] < 0) {
bytes[i] += 256;
}
}
OutputStream os = new FileOutputStream(path);//"/Users/curry/text.png"
os.write(bytes, 0, bytes.length);
os.flush();
os.close();
if(null==ip||"".equals(ip)||null==username||"".equals(username)||null==password||"".equals(password)){
re.put("result", "0");
re.put("msg", "FTP上传参数不完整!");
return re.toString();
}
KmConfig km = new KmConfig();
km.setFtpHost(ip);
km.setFtpPort(port);
km.setFtpUser(username);
km.setFtpPassword(password);
// km.setFtpPath("xxxx");
//上传到ftp
FTPUtil util=new FTPUtil();
File fileUrl = new File(path);
InputStream in = new FileInputStream(fileUrl);
util.upLoadFileFtp(km, in, toname+"."+extName);
re.put("result", "1");
re.put("msg", toname+"."+extName);
return re.toString();
} catch (Exception e) {
re.put("result", "0");
re.put("msg", e.getMessage());
return re.toString();
}
/**
* 获取request re 中流信息 即请求流中获取数据信息（Request Payload ），注意数据量这边是20M
可以参阅下https://www.cnblogs.com/btgyoyo/p/6141480.html
* @param req
* @return
*/
public static String getStringFromStream(HttpServletRequest req) {
ServletInputStream is;
try {
is = req.getInputStream();
int nRead = 1;
int nTotalRead = 0;
byte[] bytes = new byte[20480000];//20M最大
while (nRead > 0) {
nRead = is.read(bytes, nTotalRead, bytes.length - nTotalRead);
if (nRead > 0)
nTotalRead = nTotalRead + nRead;
}
String str = new String(bytes, 0, nTotalRead, "utf-8");
return str;
} catch (IOException e) {
e.printStackTrace();
return "";
}
}
}
FTPUtil 类
import java.io.DataOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import sun.net.TelnetInputStream;
import sun.net.TelnetOutputStream;
import sun.net.ftp.FtpClient;
public class FTPUtil {
public static void upLoadFileFtp(KmConfig kmConfig,InputStream is, String fileName) throws Exception{
try {
String ftpHost = kmConfig.getFtpHost();
int port = kmConfig.getFtpPort();
String userName = kmConfig.getFtpUser();
String passWord = kmConfig.getFtpPassword();
String path = kmConfig.getFtpPath();
FtpClient ftpClient = new FtpClient(ftpHost, port);// ftpHost为FTP服务器的IP地址，port为FTP服务器的登陆端口,ftpHost为String型,port为int型。
ftpClient.login(userName, passWord);// userName、passWord分别为FTP服务器的登陆用户名和密码
ftpClient.binary();
ftpClient.cd(path);// path为FTP服务器上保存上传文件的路径。
TelnetOutputStream telnetOut = ftpClient.put(fileName);// fileName为上传的文件名
DataOutputStream dataOut = new DataOutputStream(telnetOut);
byte buffer[] = new byte[1024 * 1024];
int count = 0;
while ((count = is.read(buffer)) != -1) {
dataOut.write(buffer, 0, count);
}
telnetOut.close();
dataOut.close();
ftpClient.closeServer();
} catch (Exception e) {
System.out.println("上传文件失败！请检查系统FTP设置,并确认FTP服务启动");
throw new Exception(e);
}
}
}
KmConfig类
public class KmConfig {
//主机ip
private String FtpHost = "";
//端口号
private int FtpPort;
//ftp用户名
private String FtpUser = "";
//ftp密码
private String FtpPassword = "";
//ftp中的目录
private String FtpPath = "";
public String getFtpHost() {
return FtpHost;
}
public void setFtpHost(String ftpHost) {
FtpHost = ftpHost;
}
public int getFtpPort() {
return FtpPort;
}
public void setFtpPort(int ftpPort) {
FtpPort = ftpPort;
}
public String getFtpUser() {
return FtpUser;
}
public void setFtpUser(String ftpUser) {
FtpUser = ftpUser;
}
public String getFtpPassword() {
return FtpPassword;
}
public void setFtpPassword(String ftpPassword) {
FtpPassword = ftpPassword;
}
public String getFtpPath() {
return FtpPath;
}
public void setFtpPath(String ftpPath) {
FtpPath = ftpPath;
}
}