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

最新推荐文章于 2024-04-14 12:13:08 发布

toolman01

最新推荐文章于 2024-04-14 12:13:08 发布

阅读量190

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/toolman01/article/details/128778687

版权

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

摘要由CSDN通过智能技术生成

        	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