上代码：这首先的是前端代码
<canvas width="400" height="400" style="margin:50px auto;border: 1px solid #ccc;">
你的浏览器不支持Canvas
</canvas>
<span style="cursor:pointer;">点击下载</span>
<script type="text/javascript">
var canvas = $("canvas")[0];
var cav = canvas.getContext("2d");
cav.width = 200;
cav.height = 200;
cav.fillStyle = "#DC143C";
cav.fillRect(0,0,200,200);
var download = $("span");
download.click(function () {
var baseStr = canvas.toDataURL("image/png");
console.log(baseStr);
baseStr = baseStr.substring(baseStr.laseIndexOf(",")+1);
$.post("<%=path %>/images/upload.do",{baseStr:baseStr},function () {
})
})
</script>上控制层代码：
package com.spring.Controller;
import java.io.File;
import java.util.Enumeration;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.spring.util.ImageDownloadUtil;
@Controller
@RequestMapping("/images")
public class ImagesController {
@RequestMapping(value="/upload.do",produces = "text/html; charset=utf-8")
@ResponseBody
public void ImageUpload(HttpServletRequest request,@RequestParam("baseStr")String baseStr,HttpServletResponse response) {
response.setCharacterEncoding("UTF-8");
System.out.println("baseStr:"+baseStr);
String path = request.getSession().getServletContext().getRealPath("/images");
long fileName = System.currentTimeMillis();
ImageDownloadUtil.decodeBase64ToImage(baseStr, path, String.valueOf(fileName));
}
}
上服务层代码：
package com.spring.util;
import java.io.File;
import java.io.FileOutputStream;
import cn.hutool.core.codec.Base64Decoder;
public class ImageDownloadUtil {
public static void decodeBase64ToImage(String base64,String path,String fileName) {
try {
System.out.println(path+File.separator+fileName);
FileOutputStream out = new FileOutputStream(path+File.separator+fileName+".png");
byte[] decodeBytes = Base64Decoder.decode(base64);
out.write(decodeBytes);
out.flush();
out.close();
}catch (Exception e) {
// TODO: handle exception
}
}
}
现在我们谈谈我在中间遇到的错误
首先呢，我是把canvas通过toDataURL("image/png")转换成base64编码制，然后直接通过Ajax把整个生成的字符串发送给后台，发现生成的图片呢（声明下，后端处理的代码没有任何问题）;
后来，我在改的过程中吧toDataURL("image/png")输出下，发现他的格式是：
data:image/png;base64,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
看到没，前面有个data:image/png;base64, 。我想啊，后天是处理base64编码的，但是好像前面不是吧，结果我把前面这段截掉了，果然生成的图片就对了。（代码已经给出了）
