使用Canvas实现前端图片尺寸裁切_对canvas高度进行裁剪-优快云博客

本文链接：https://blog.youkuaiyun.com/toolman01/article/details/128778687

本文详细介绍了如何利用HTML5的Canvas API在前端进行图片尺寸裁切，包括图片上传、绘制到Canvas、裁剪选区设置、以及最终导出裁剪后的图片。通过实例代码展示了完整的裁切流程，适用于前端图片预览和编辑场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        	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开始读取图片