图片（画布上的图片）上传总结
最近在做图片上传的一些东西，目前为止已经做的相对比较完善了，所以对图片上传做一些总结。
我最初的想法是把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 {........}
