html2canvas 截屏后上传到服务器端（springmvc3）

利用html2canvas截屏后可以生成base64类型的图片，但是这样的图片很明显不能被引用或者被SNS工具来分享。这样就必须截屏后再上传数据到后台服务器端重新保存。

前端js代码：

 $("#saveImage").click(function() {
					html2canvas($('#mypics'), {
						onrendered : function(canvas) {
							var myImage = canvas.toDataURL("image/jpeg");
							//并将图片上传到服务器用作图片分享
							$.ajax({
								type : "POST",
								url : '${ctx}/qsupload',
								data : {data:myImage},
								timeout : 60000,
								success : function(data){
									$('#myShowImage').attr('src', '${ctxStatic}/usertemp/'+data+'.jpg'); //服务器上保存图片路径，data是返回的文件名。
								}
							});
						}
					});
				});

后端代码

import org.apache.commons.codec.binary.Base64;

@RequestMapping(value = { "${frontPath}/qsupload" }, method = { RequestMethod.POST })
	@ResponseBody
	public String petUpgradeTarget(HttpServletRequest request, String data) {
		String serverPath = request.getSession().getServletContext()
				.getRealPath("/");
		Base64 base64 = new Base64();
		try {

      //注意点：实际的图片数据是从 data:image/jpeg;base64, 后开始的
			byte[] k = base64.decode(data.substring("data:image/jpeg;base64,"
					.length()));
			InputStream is = new ByteArrayInputStream(k);
			String fileName = UUID.randomUUID().toString();
			String imgFilePath = serverPath + "\\static\\usertemp\\" + fileName + ".jpg";

                       //以下其实可以忽略，将图片压缩处理了一下，可以小一点

			double ratio = 1.0;
			BufferedImage image = ImageIO.read(is);
			int newWidth = (int) (image.getWidth() * ratio);
			int newHeight = (int) (image.getHeight() * ratio);
			Image newimage = image.getScaledInstance(newWidth, newHeight,
			Image.SCALE_SMOOTH);
			BufferedImage tag = new BufferedImage(newWidth, newHeight,
					BufferedImage.TYPE_INT_RGB);
			Graphics g = tag.getGraphics();
			g.drawImage(newimage, 0, 0, null);
			g.dispose();
			ImageIO.write(tag, "jpg", new File(imgFilePath));
			return fileName;
		} catch (Exception e) {
			return "error";
		}
	}

评论

3 楼 fanglei613 2017-01-18  

ＬＺ的头像是国見比呂

顺便问一下 html2canvas是异步请求的，这个有办法变成同步吗

2 楼 leobluewing 2015-03-02  

小丑皇吃巧克力 写道

请问 图片黑色遮罩是怎么回事 啊？

应该是html2canvas本身的bug

1 楼 小丑皇吃巧克力 2015-02-26  

请问 图片黑色遮罩是怎么回事 啊？