谈canvas转图片的方法(base64编码)

上代码：这首先的是前端代码

		你的浏览器不支持Canvas
	
	点击下载
	
	

上控制层代码：

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编码的，但是好像前面不是吧，结果我把前面这段截掉了，果然生成的图片就对了。（代码已经给出了）