canvas 图片绘制、视频绘制

た入场券 2021-07-24 11:36 570阅读 0赞

canvas
    	1.canvas中绘制图片:
    		
    		img对象.onload=function(){
    			bi.drawImage(img对象,x坐标,y坐标);
    			bi.drawImage(img对象,x坐标,y坐标,width,height);
    			bi.drawImage(img对象,裁切x坐标,裁切y坐标,裁切width,裁切height,绘制x坐标,绘制y坐标,绘制wdith,绘制height);
    		}
    
    		img对象两种方式:
    		(1)页面img标签后,dom获取
    		(2)new Image();Image对象.src='图片路径'
    	
    	2.将canvas变成img图片
    		方式一:转换成Blob图像
    			canvas.toBlob(fn,mimeType,quality);
    				fn			成功回调
    				mimeType	表示需要转换的图像的mimeType类型,默认值是image/png,还可以是image/jpeg、image/webp
    				quality		表示转换的图片质量,范围是0到1,由于Canvas的toBlob()方法转PNG是无损的,当指定图片mimeType是image/jpeg或者image/webp，此时默认压缩值是0.92。
    			canvas.toBlob((blob)=>{
    			    let img=new Image();
    			    img.src=URL.createObjectURL(blob);
    			    document.body.appendChild(img);
    			})
    			
    		方式二:转换成base64图像
    			canvas.toDataURL(mainType,quality)
    				mainType:		默认是image/png,还可以是image/jpeg,甚至image/webp
    				quality:0-1;	默认png是无损压缩,不需要设置,其他类型默认压缩质量是0.92
    
    			let base64=c.toDataURL();
    			let img=new Image();
    			img.src=base64
    			
    	3.canvas中绘制视频:
    		通过定时器来不断剪切
    		视频对象.addEventListener('play',function() {
    			let i=window.setInterval(()=>{
    				ctx.drawImage(视频对象,0,0,270,135)},20);
    			},false);
    		视频对象.addEventListener('pause',function() {clearInterval(i);},false);
    		视频对象.addEventListener('ended',function() {clearInterval(i);},false);

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		.canvas{ 
    			border:solid 2px black;
    		}
    	
    	
    	</style>
    </head>
    <body>
    
    	<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
    	<script>
    			var	canvas=document.querySelector(".canvas");
    			var bi=canvas.getContext('2d');
    			var img2=document.querySelector('img');
    
    			bi.beginPath();
    			var tempImg=new Image();
    			tempImg.src='img/lb1.jpg';
    			tempImg.onload=function()
    			{ 
    				// bi.drawImage(tempImg,50,50,);
    				// bi.drawImage(tempImg,50,50,200,200);
    				bi.drawImage(tempImg,50,50,200,200,0,0,200,200);
    			}
    
    			
    			bi.closePath();
    
    	</script>
    	
    </body>
    
    </html>