【PHP】控制摄像头缩放监控画面大小，并保存可视画面为图片

一、前言

功能描述

调用摄像头并可以控制缩放摄像头监控画面的大小，把可视画面保存为图片。

我使用的是USB摄像头，其他摄像头此方法应该也通用。

使用技术

使用到的技术比较简单，前端使用WebcamJS插件调用摄像头，并摄像头监控画面，使用CSS的transform属性来放大或缩小画面的大小。后端使用PHP的Imagick类库来缩放图片，最终保存图片到本地。

二、最终效果

Capture：保存可视区域图片；放大：放大可视区域画面；缩小：缩小可视区域画面；还原：还原可视区域画面。

三、业务逻辑说明

前端

① 调用摄像头：使用WebcamJS库调用摄像头，显示监控画面（注意：需要在https下才能使用此插件）；

② 缩放画面：先初始可视区域的宽高，设置scale缩放比例，再使用CSS的transform属性来缩放画面大小（注意：transform属性只是在视觉上对图片进行了缩放，其实和图像的真实大小并不一致，因为我这里为了保持放大后的图像尺寸大小和原始图像尺寸大小在视觉上一致，所以我把多余的画面区域使用overflow隐藏了）；

③ 数据传输后端：把图片数据和缩放比例传输给PHP后端进行处理。此时传输的图像数据是base64编码，尺寸大小并不是视觉上所看到的画面大小，这个需要在后端进行处理。

后端

① 接收前端传过来的数据（base64图片编码、缩放比例）；

② 把接收的base64编码保存为图片到本地；

③ 对图片进行处理：使用Imagick类库对图像进行处理，前面说了前端传过来的图像尺寸并不是可视区域的尺寸，所以为了保存一致，需要对接收的原始图像进行缩放处理。需要两个步骤，先是根据放大比例计算并保存放大后的图片（是原始大小的图片，不是视觉大小的图片），再对该图片进行裁剪，裁剪方法是计算裁剪区域的起始坐标，这个坐标是从放大后图像的中心位置开始计算的，最后根据这个坐标和裁剪尺寸进行裁剪并保存新的图片。这样就得到了一个从放大后的图像中心为圆心，向外扩散裁剪；

④ 保存裁剪后的图片，进行后续操作。

四、代码

前端