php配合前端实现上传图片截图

正文：

需求是上传图片后可以对图片进行截图操作

第一次上传图片源文件是通过input，input的文件流对象file是不能修改的，所以文件的截图就需要用到canvas

我们先讲文件上传服务器，在上传成功后，截图弹窗获得响应，获得文件在服务器的路径，用canvas加载出图片的画布

		let ctx = cvs.getContext("2d");
        ctx.drawImage(this.img, 0, 0);
        //复制画布上指定矩形的像素数据
        //x	开始复制的左上角位置的 x 坐标。
		//y	开始复制的左上角位置的 y 坐标。
		//width	将要复制的矩形区域的宽度。
		//height	将要复制的矩形区域的高度。

        let imgData = ctx.getImageData(
           x,y,width,height	
        );

然后通过 putImageData() 将图像数据放回画布

let t = document.createElement("canvas");
        t.width = imgData.width;
        t.height = imgData.height;
        /*imgData	规定要放回画布的 ImageData 对象。
		*x	ImageData 对象左上角的 x 坐标，以像素计。
		*y	ImageData 对象左上角的 y 坐标，以像素计。
		*/
        t.getContext("2d").putImageData(imgData, 0, 0);
        let src = t.toDataURL("image/octet-stream");
        

最后用ajax将src上传服务器

 //get的上传长度有限制
        $.ajax({
            type: "POST",
            url: '',
            data: {
				'file': src
			},    //视情况将base64的前面字符串data:image/png;base64,删除
            cache: false,
            success: function (json) {
             
            },
            error: function (HttpRequest, ajaxOptions, thrownError) {
              
            },complete:function () {
               
            }
        });
        

服务器后端的php这么处理传过来的缓存地址,将之前canvas的base64编码转换成文件编码（解码）

public function index()
    {
    	//header() 函数向客户端发送原始的 HTTP 报头
        header('Content-type:text/html;charset=utf-8');
        $base64_image_content = $_POST['file'];

	//匹配出图片的格式

        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {

            $type = $result[2];

            $new_file = SYS_UPLOAD_PATH . date('Ymd', time()) . "/";

            if (!file_exists($new_file)) {

//检查是否有该文件夹，如果没有就创建，并给予最高权限

                mkdir($new_file, 0700, true);

            }
            $time_tab = time();
            $new_file = $new_file . $time_tab . ".{$type}";
			//base64_decode:对使用 MIME base64 编码的数据进行解码
            if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
               //保存成功
            } else {

               //保存失败

            }

        }
    }
    

写的不好或者看不明白，请给我留言，我会快速修改

另外还有其他的思路

https://zhuanlan.zhihu.com/p/351374582

php支持图片的处理，接口类似前端的canvas

截图可以只上传截图的信息参数，由后台完成截图

而我选择的是前端上传截图图片（缓存地址）