html截图 viedo标签截图上传图片到服务器 java代码保存图片（完整）

最新推荐文章于 2023-06-05 15:21:51 发布

LiWang__

最新推荐文章于 2023-06-05 15:21:51 发布

阅读量2k

点赞数

分类专栏：全栈 java

本文链接：https://blog.csdn.net/lwang_IT/article/details/88941885

版权

全栈同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

java

1 篇文章 0 订阅

订阅专栏

对Html标签截图代码(直接引入html2canvas.js文件)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
	</head>
	<body>   
		<div id="capture" style="background: coral">
				<h2>this is   
					<b>bold</b> 
					<span style="color:red">red</span>
				</h2>
			</div>
		<input type="button" value="生成" onclick="goFun()" />
		</body>   

	<script type="text/javascript">
		function goFun(){
			setTimeout(function(){
				html2canvas(document.querySelector("#capture")).then(canvas => {
					document.body.appendChild(canvas)
				});
			},1500)
		}
		</script>
</html>

特殊的对viedo标签进行截图（注意修改下面的source 标签的视频路径为本地的）：

注意：如果使用drawImage截取标签浏览器会报错：Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

大概的意思是：未捕获的类型错误:未能在“CanvasRenderingContext2D”上执行“drawImage”:提供的值不是类型“(CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或offscreenencanvas)”

<!DOCTYPE html>
<html>
<body>
<p>要使用的视频：</p>
<video id="video1" controls width="270" autoplay>
  <source src="viedo/test.mp4" type='video/mp4'>
</video>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
您的浏览器不支持HTML5 canvas标签。
</canvas>
<button onclick="clickfun()">截图</button>
<script>
function clickfun(){
	var v=document.getElementById("video1");
	var c=document.getElementById("myCanvas");
	ctx=c.getContext('2d');
	ctx.drawImage(v,0,0,270,135);
}
</script>
</body>
</html>

截图上传功能实现(主要使用canvas.toDataURL('image/png')这个方法)

注意：

本地测试出现Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported如何解决？

一放到服务器上面就好了，这样就不存在什么跨域问题了

原因：大概意思是canvas无法执行toDataURL方法：污染的画布无法输出。
经google 发现原来是受限于 CORS 策略，会存在跨域问题，虽然可以使用图像（比如append到页面上）但是绘制到画布上会污染画布，一旦一个画布被污染,就无法提取画布的数据，比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候会抛出一个安全错误

//将base64转换为文件
 var  dataURLtoBlob=function(dataurl, filename) { 
	  var arr = dataurl.split(','),
           mime = arr[0].match(/:(.*?);/)[1],
           bstr = atob(arr[1]),
           n = bstr.length,
           u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
}
//canvas画出该图 →调用canvas的方法生成base64编码 → 将编码转换成file对象
function printscreen(){
	var video =$("#media").find("video")[0];//获取前台要截图的video对象，
	var canvas =  document.createElement('canvas'); 
	var width = 400;
	var height = 533;
	canvas.width = width;
	canvas.height = height;
	var ctx = canvas.getContext('2d');//设置canvas绘制2d图，
	try{ 
		ctx.drawImage(video, 0, 0, width, height);//将video视频绘制到canvas中
	}catch(err){//drawImage截取的标签有限制，请看上面，所以这里捕获一下异常，然后使用htmlToCanvas
		console.error(err);
		html2canvas( [ document.getElementById("media") ], {
			onrendered: function(canvaS) {
				canvas=canvaS;
			}
		});
	}
	var imageS = canvas.toDataURL('image/png');//canvas的api中的toDataURL（）保存图像
    var blob=dataURLtoBlob(imageS);
    var formData = new FormData();
          formData.append("file",blob);
          $.ajax({
                 url: "...",
                 type: "POST",
                 data: formData,
                 contentType: false,
                 processData: false,
                 success: function (data) {
                 	if(data.success){

                 	}else{}
                 },
                 error: function () {}
             })
}

服务器端接收

注：拼接字符串建议使用Stringbuilder

    @RequestMapping(value="pImg.do",method = RequestMethod.POST)
	@ResponseBody
	//遇到问题:上传图片base64 SringMVC+Tomcat 报错 Request header is too large 
	public Object addPrintscreenImg(MultipartFile file,HttpServletRequest request){
        //图片名称
		String fileName=MD5.sign(UUID.randomUUID().toString().replace("-", "").toLowerCase(),"utf-8")+".png";
        //保存路径upload/年/月/日
		String savepdfpath="upload/"+new SimpleDateFormat("yyyy/MM/dd/").format(new Date());
        //RootStatic.root_Directory为根目录 比如F:\img\
		String roorSavePath=RootStatic.root_Directory+savepdfpath;
		boolean b=super.uploadServer(file,roorSavePath, fileName);
		log.info("截图保存->YorX:"+b+",保存路径:"+roorSavePath+",文件名:"+fileName);
		if(b) {
			Map map=super.AddBoToMap(request);
			String dataStorePath=savepdfpath+fileName;
			map.put("path", dataStorePath);
			int i=yx.addVideoScreenshot(map);
			if(i>0) {
				log.info("截图保存成功->icbcId"+icbcId);
                //RootStatic.download_prefix 为访问的url前缀
				return renderSuccess(RootStatic.download_prefix+dataStorePath);//返回图片路径显示在前端
			}else {
				log.info("截图保存失败");
				return renderError("保存失败！");
			}
		}else {
			return renderError("上传失败！");
		}
	}


    //文件上传
	 protected boolean uploadServer(MultipartFile file, String path,String fileName) {
		// 判断文件是否为空  
        if (!file.isEmpty()) {  
            try {  
                File filepath = new File(path);
                if (!filepath.exists()) 
                    filepath.mkdirs();
                // 文件保存路径  
                String savePath = path + fileName;
                log.info("图片路径->"+savePath);
                File imgPath=new File(savePath);
                imgPath.createNewFile();//且仅当不存在具有此抽象路径名指定名称的文件时，不可分地创建一个新的空文件
                // 转存文件  
                file.transferTo(imgPath);  
                return true;
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
        }
        return false;
	 }


   //业务对象
    public Map AddBoToMap(HttpServletRequest request) {
    	Map map=this.updateBoToMap(request);
    	map.put("midAdd", this.getUserId(request));
    	map.put("dtAdd", creditutil.time());
		return map;
    }
    
    public Map updateBoToMap(HttpServletRequest request) {
    	Map map=new HashMap<>();
    	map.put("midEdit", this.getUserId(request));
    	map.put("dtEdit", creditutil.time());
		return map;
    }

完成，亲测可用！

LiWang__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html截图 viedo标签截图上传图片到服务器 java代码保存图片（完整）

对Html标签截图代码(直接引入html2canvas.js文件)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/html2canvas/...
复制链接

扫一扫