如何从html传图片到iis,使用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;

}

}