图片（画布上的图片）上传总结

最近在做图片上传的一些东西，目前为止已经做的相对比较完善了，所以对图片上传做一些总结。

我最初的想法是把html5的标签canvas上的图片得到，上传到服务器上并能够及时预览。

canvas上的图片分为两种情况：

1.自己绘制上去的。代码如下： 

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

2.选择本地的一幅图片放置在画布上。代码入下：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

  但是canvas上自己绘制的图片往后台传比较容易，但是第2种情况本地img的src获取不到（这是浏览器为了安全考虑不让用户获取到的），因此也就无法将img放置在画布上。

  因此我就使用普通的<img>标签来保存选择的本地图片，用<canvas>来保存自己绘制的图片。

html代码片段：

<td>

     <!--这个button是用来消除input type='file'的默认样式，将其隐藏起来，然后用trigger()来触发输入框的事件-->
        <button id="choosePicBtn" disabled=true onclick="trigger()">选择图片</button>
        <input type="file" hidden="true" name="picFile" id="fileChoose" onchange="drawPicLogo()" accept="image/png,image/jpg,image/jpeg"/>
</td>

....

<!--这个区域是用来预览图片的，不论是自己绘制的还是本地选择的一幅图片-->

 <td colspan=2 id="picArea"> 
</td>

/*
* hjw 文件选择事件函数
*/
function trigger() {
    $("#fileChoose").click();
}

如果我选择的是自己绘制图片，那么就执行下面语句：

$("#picArea").html("<canvas id='logoCanvas' width='512' height='64'></canvas>");

如果是选择已有的图片，那么就执行下面的语句：

$("#picArea").html("<img id='logoImg' width='512' height='64'></img> ");

并设置img的url，取得图片的url函数如下：

//获取input[file]图片的url Important
function getFileUrl(fileId) { 
   var url; 
   var file = Id(fileId);
   var agent = navigator.userAgent;
   if (agent.indexOf("MSIE")>=1) {
   url = file.value; 
   } else if(agent.indexOf("Firefox")>0) { 
   url = window.URL.createObjectURL(file.files.item(0)); 
   } else if(agent.indexOf("Chrome")>0) {
   url = window.URL.createObjectURL(file.files.item(0)); 
   } 
   return url; 
} 

开始上传：，首先是自己绘制的图片，

/*
 * hjw
 * 将canvas上的对象保存为图片，并上传
 * */
function textLogoUpload(logoTitle,font,fontSize,txtColor,backGroundColor,showState,isBKGColor){
   //选择的输入源
   var selectedNode=zTree.getSelectedNodes()[0];
   var id=selectedNode.id;
   //文字台标的位置信息，x坐标和y坐标
   var xPos=$("#logo_x_value").val();
   var yPos=$("#logo_y_value").val();
   var channel=selectedNode.channel;
   var subChannel=selectedNode.subChannel;
   var canvas = document.getElementById("logoCanvas");
   var data=canvas.toDataURL();
   //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
   data=data.split(",")[1];
    var  dataImg={
       file:data,//文字台标的图片数据（BASE64编码）
       id:id,
      showState:showState,
       logoText:logoTitle,
       font:font,
       fontSize:fontSize,
       txtColor:txtColor,
       backGroundColor:backGroundColor,
       x:xPos,
       y:yPos,
      channel:channel,
      subChannel:subChannel,
      isBKGColor:isBKGColor
    };
   $.ajax({
       url:'/darwin/service/imgUpload/textLogo',
       type:"POST",
       data:dataImg,
       success:function(){
       }
   });
}

后台，

@RequestMapping(value="textLogo", method = RequestMethod.POST)
public void  textLogoUpload(HttpServletRequest request, HttpServletResponse response){
//首先将前台传递过来的BASE64字符串解码为图片
File file=decodeBase64ToFile(request.getParameter("file"));
....................
}
Base64解码的类如下：
package darwin.soc.videowallcontroller.web.imgUpload;

/**
 * Created by seven_hu on 2015/9/8.
 */
public class BASE64Code {
    /**
     * Base64编码表。
     */
    private static final char[] BASE64CODE =
            {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
                    'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q',
                    'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/',};

    /**
     * Base64解码表。
     */
    private static final byte[] BASE64DECODE =
            {-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
                    -1, -1, -1,
                    -1,
                    -1, // 注意两个63，为兼容SMP，
                    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, 63,
                    -1,
                    63, // “/”和“-”都翻译成63。
                    52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, 0, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
                    12, 13,
                    14, // 注意两个0：
                    15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1,
                    -1, // “A”和“=”都翻译成0。
                    -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51,
                    -1, -1, -1, -1, -1,};

    private static final int HEX_255 = 0x0000ff;

    private static final int HEX_16515072 = 0xfc0000;

    private static final int HEX_258048 = 0x3f000;

    private static final int HEX_4032 = 0xfc0;

    private static final int HEX_63 = 0x3f;

    private static final int HEX_16711680 = 0xff0000;

    private static final int HEX_65280 = 0x00ff00;

    private static final int NUMBER_TWO = 2;

    private static final int NUMBER_THREE = 3;

    private static final int NUMBER_FOUR = 4;

    private static final int NUMBER_SIX = 6;

    private static final int NUMBER_EIGHT = 8;

    private static final int NUMBER_TWELVE = 12;

    private static final int NUMBER_SIXTEEN = 16;

    private static final int NUMBER_EIGHTEEN = 18;

    /**
     * 构造方法私有化，防止实例化。
     */
    private BASE64Code()
    {
    }

    /**
     * Base64编码。将字节数组中字节3个一组编码成4个可见字符。
     *
     * @param b
     *            需要被编码的字节数据。
     * @return 编码后的Base64字符串。
     */
    public static String encode(byte[] b)
    {
        int code = 0;

        // 按实际编码后长度开辟内存，加快速度
        StringBuffer sb = new StringBuffer(((b.length - 1) / NUMBER_THREE) << NUMBER_TWO + NUMBER_FOUR);

        // 进行编码
        for (int i = 0; i < b.length; i++)
        {
            code |=
                    (b[i] << (NUMBER_SIXTEEN - i % NUMBER_THREE * NUMBER_EIGHT))
                            & (HEX_255 << (NUMBER_SIXTEEN - i % NUMBER_THREE * NUMBER_EIGHT));
            if (i % NUMBER_THREE == NUMBER_TWO || i == b.length - 1)
            {
                sb.append(BASE64CODE[(code & HEX_16515072) >>> NUMBER_EIGHTEEN]);
                sb.append(BASE64CODE[(code & HEX_258048) >>> NUMBER_TWELVE]);
                sb.append(BASE64CODE[(code & HEX_4032) >>> NUMBER_SIX]);
                sb.append(BASE64CODE[code & HEX_63]);
                code = 0;
            }
        }

        // 对于长度非3的整数倍的字节数组，编码前先补0，编码后结尾处编码用=代替，
        // =的个数和短缺的长度一致，以此来标识出数据实际长度
        if (b.length % NUMBER_THREE > 0)
        {
            sb.setCharAt(sb.length() - 1, '=');
        }
        if (b.length % NUMBER_THREE == 1)
        {
            sb.setCharAt(sb.length() - NUMBER_TWO, '=');
        }
        return sb.toString();
    }

    /**
     * Base64解码。
     *
     * @param code
     *            用Base64编码的ASCII字符串
     * @return 解码后的字节数据
     */
    public static byte[] decode(String code)
    {
        // 检查参数合法性
        if (code == null)
        {
            return null;
        }
        int len = code.length();
        if (len % NUMBER_FOUR != 0)
        {
            throw new IllegalArgumentException("Base64 string length must be 4*n");
        }
        if (code.length() == 0)
        {
            return new byte[0];
        }

        // 统计填充的等号个数
        int pad = 0;
        if (code.charAt(len - 1) == '=')
        {
            pad++;
        }
        if (code.charAt(len - NUMBER_TWO) == '=')
        {
            pad++;
        }

        // 根据填充等号的个数来计算实际数据长度
        int retLen = len / NUMBER_FOUR * NUMBER_THREE - pad;

        // 分配字节数组空间
        byte[] ret = new byte[retLen];

        // 查表解码
        char ch1, ch2, ch3, ch4;
        int i;
        for (i = 0; i < len; i += NUMBER_FOUR)
        {
            int j = i / NUMBER_FOUR * NUMBER_THREE;
            ch1 = code.charAt(i);
            ch2 = code.charAt(i + 1);
            ch3 = code.charAt(i + NUMBER_TWO);
            ch4 = code.charAt(i + NUMBER_THREE);
            int tmp =
                    (BASE64DECODE[ch1] << NUMBER_EIGHTEEN) | (BASE64DECODE[ch2] << NUMBER_TWELVE)
                            | (BASE64DECODE[ch3] << NUMBER_SIX) | (BASE64DECODE[ch4]);
            ret[j] = (byte)((tmp & HEX_16711680) >> NUMBER_SIXTEEN);
            if (i < len - NUMBER_FOUR)
            {
                ret[j + 1] = (byte)((tmp & HEX_65280) >> NUMBER_EIGHT);
                ret[j + NUMBER_TWO] = (byte)((tmp & HEX_255));

            }
            else
            {
                if (j + 1 < retLen)
                {
                    ret[j + 1] = (byte)((tmp & HEX_65280) >> NUMBER_EIGHT);
                }
                if (j + NUMBER_TWO < retLen)
                {
                    ret[j + NUMBER_TWO] = (byte)((tmp & HEX_255));
                }
            }
        }
        return ret;
    }
}

然后开始选择图片的上传：
前台
function picLogoUpload(showState,isBKGColor){
   //获得设置台标的输入源
      var selectedNode=zTree.getSelectedNodes()[0];
      var id=selectedNode.id;
      var channel=selectedNode.channel;
      var subChannel=selectedNode.subChannel;
      $.ajaxFileUpload({
         url : '/darwin/service/imgUpload/picLogo', // 用于文件上传的服务器端请求地址
         type : 'post',
         data: { id: id, channel: channel, subChannel: subChannel, showState: showState, isBKGColor: isBKGColor },
         secureuri : false, // 一般设置为false
         fileElementId : 'fileChoose', // 文件上传空间的id属性 <input type="file"
                                 // id="file" name="file" />
         dataType : 'text', // 返回值类型 一般设置为json
         success : function(data, status) // 服务器成功响应处理函数
         {
         },
         error : function(data, status, e)// 服务器响应失败处理函数
         {
         }
      });
      return false;
}
这里用到了 ajaxFileUpload.js插件，后台：
@RequestMapping(value = "picLogo", method = RequestMethod.POST)
public void  picLogoUpload(@RequestParam("picFile") MultipartFile file,
                     HttpServletRequest request, HttpServletResponse response)
      throws Exception {........}