使用html2canvas.js截图并保存到后台

要求 在执行一定事件后对操作的网页进行截图保存。
使用js工具:

<script src="https://cdnbootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

引入JS后就可以进行截图操作了;
jquery代码:

function sendPic() {
    //使用
    html2canvas(documentEle.body, {
        scale: 1
    }).then((image)=>{
        var url = image.toDataURL();//图片
		$.ajax({
		url:  "" ,
		type:'POST',
		datatype:'jsonp',
		contentType:'application/json',
		data: {
			url:url
			},
		success:function(res){
		    
		} 
	})
   
});
}

后台代码:

//MVC的 直接可以接收参数
 public String save(String url) {
     
        try {
                String rr = param.replaceAll("data:image/png;base64,", "");//这行是图片能不能正常转换的关键
                //Base64解码
                byte[] b = decoder.decodeBuffer(rr);
                for (int i = 0; i < b.length; ++i) {
                    if (b[i] < 0) {
                        //调整异常数据z
                        b[i] += 256;
                    }
                }
                //生成jpeg图片
				//图片写到流里面 可以做其他操作了
                InputStream input = new ByteArrayInputStream(b);
                return null;
            }
        } catch (Exception e) {
         
            return null;
        }

    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值