使用java、html5以及wPaint实现在线编辑图片并保存到FTP中的功能,在线图片为iis服务

时间:2024-03-17 10:49:52

文件准备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 对应值 *

 

使用java、html5以及wPaint实现在线编辑图片并保存到FTP中的功能,在线图片为iis服务
配置http头

 iis 其他配置不做详解,

2、图片访问服务端代码,关键代码说明(如红色字说明):

getImage: function()
        {
            this.canvasSave = document.createElement('canvas');
            this.ctxSave = this.canvasSave.getContext('2d');
            
            
            //if a bg image is set, it will automatically save with the image
            if(this.canvasBg){
                $(this.canvasSave).load(function() {
                     this.ctxSave.drawImage(this.canvasBg, 0, 0);
                    // call next step in your code here, f.ex: nextStep();
                });
            }
            $(this.canvasSave).load( function() {
                this.ctxSave.drawImage(this.canvas, 0, 0);
                // call next step in your code here, f.ex: nextStep();
            });
            //$(this.canvas).attr("crossOrigin", 'Anonymous');//图片跨域问题解决方案 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错
            $(this.canvas).crossOrigin='';//与上一句代码实现效果一致

            $(this.canvasSave).css({display:'none', position: 'absolute', left: 0, top: 0}).attr('width', $(this.canvas).attr('width')).attr('height', $(this.canvas).attr('height'));

            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();
        },

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();
            }
        }

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;
    }    
}