vue中实现使用相框点击拍照,canvas进行前端图片合并下载

发布时间:2023年12月17日

拍照和相框合成,下载图片dome

一、canvas介绍

Canvas是一个HTML5元素,它提供了一个用于在网页上绘制图形、图像和动画的2D渲染上下文。Canvas可以用于创建各种图形,如线条、矩形、圆形、文本等,并且可以通过JavaScript进行编程操作。

Canvas元素本身是一个矩形框,可以通过CSS样式进行样式设置。在Canvas上绘制图形时,需要先获取Canvas的2D渲染上下文,然后通过上下文的方法来进行绘制。

二、navigator.mediaDevices.getUserMedia介绍

navigator.mediaDevices.getUserMedia是一个Web API,它允许网页访问用户的媒体设备,如摄像头和麦克风。这个API返回一个Promise对象,成功后会resolve回调一个MediaStream对象。

使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能时,需要调用其getUserMedia方法并传入一个包含媒体类型约束的约束对象。这个约束对象可以包含音频、视频或两者都包含。 

navigator.mediaDevices.getUserMedia({ audio: true, video: true })  
  .then(function(stream) {  
    // 在这里使用媒体流  
  })  
  .catch(function(err) {  
    // 处理错误  
  });

如果用户同意,getUserMedia方法会返回一个包含音频和视频轨道的MediaStream对象。我们可以在then回调函数中使用这个媒体流。如果用户拒绝访问权限,或者需要的媒体源不可用,promise会reject回调一个PermissionDeniedError或者NotFoundError。

三、拍照下载图片功能

1:拍照画布
<!-- 拍照canvas -->
<canvas  style="display: none;"  ref="canvasCamera" class="canvas"></canvas>
2:显示调用摄像头效果
 <video ref="photoVideo" autoplay class="video"></video>
3:拍照后显示的图片
<img :src="downloadImgLink" alt="" ref="photosDownload"  class="photos-download">
3:点击拍照的按钮
<button class="operate-button" @click="btnTakePhotoClicked"> 
   <div class="round"></div>
</button>

四、方法

1:点击拍照
async btnTakePhotoClicked(){
            this._context2d=this.canvasCamera.getContext("2d");
            //如果已经拍照了就不能在点击拍照
            if(!this.photoEnabled) return
            // 将canvas画布设置和视频元素的大小一样
            this.canvasCamera.width=this.photoVideo.offsetWidth
            this.canvasCamera.height=this.photoVideo.offsetHeight
            // 截取和视频一样大小的图片保证图片没有变形
			this._context2d.drawImage(this.photoVideo,0,0,this.photoVideo.offsetWidth,this.photoVideo.offsetHeight )
			this.downloadImgLink =this.canvasCamera.toDataURL("image/png"); // 截取视频最后一帧
            this.photoEnabled=false
		},
2:下载拍摄照片
 //下载拍摄的照片
       async downloadImg(){
            //如果没有拍照点击下载无效
            if(this.downloadImgLink==='') return
            let downloadBase64= await this.composeImgs(this.photoImg, this.photosDownload);
            //下载base64格式图片需要使用a标签来创建
            let a = document.createElement("a");
            a.style.display = "none";
            a.download = 'christmas';
            a.href = downloadBase64;
            document.body.appendChild(a);
            a.click();
            // 下载完成可以点击拍照
            this.photoEnabled=true
            //下载完成清空上次拍照地址
            this.downloadImgLink=''
        },
3:将拍好的照片和相框合成一张图片,返回一个base64的图片地址
            
文章来源:https://blog.csdn.net/weixin_57163112/article/details/134994771
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。