使用Canvas实现前端图片尺寸裁切

        	const virtualCanvas = document.createElement('canvas');
        	//创建canvas对象
       		virtualCanvas.height = 512;
        	virtualCanvas.width = 512;
        	//设置压缩后的尺寸
        	const canvasCtx = this.virtualCanvas.getContext('2d');
        	//获取canvas的2dcontext
			const rawImage = new File();//替换为实际业务中的图片blob
            const fr = new FileReader();
            //构造一个FileReader
            fr.addEventListener('loadend', () => {
            	//FileReader读取结束时回调
                const pImage = new Image();
                //构造一个HTMLImageElement
                pImage.src = fr.result.toString();
                //将读取结果作为img的src传入
                canvasCtx.clearRect(0, 0, 512, 512);
                //清理canvas
                    let sx = 0;
                    let sy = 0;
                    let sw = 0;
                    let sh = 0;
                    if (pImage.height >= pImage.width) {
                        sx = 0;
                        sy = (pImage.height - pImage.width) / 2;
                        sw = pImage.width;
                        sh = pImage.width;
                    } else {
                        sx = (pImage.width - pImage.height) / 2;
                        sy = 0;
                        sw = pImage.height;
                        sh = pImage.height;
                    }
                    canvasCtx.drawImage(pImage, sx, sy, sw, sh, 0, 0, 512, 512);
                    //在512尺寸canvas上绘制原图的居中正方形区域
                setTimeout(async () => {
                    const compressedImageUrl = pageRef.virtualCanvas.toDataURL('image/png', 0.8);
                    //将canvas内容输出为base64格式的png（或根据业务自行选择）
                    //第二个参数为压缩质量
                    //do something
                }, 500);
				//canvascontext2d的drawImage没有回调接口
				//简单解决方式，此处直接setTimeout手动等待一下
				//或也可使用requestAnimationFrame等方法实现
            });
            
            fr.readAsDataURL(rawImage);
            //在触发逻辑处调用此句使FileReader开始读取图片