本文介绍了一种通过HTML和canvas实现图片上传、裁剪及变换的方法。具体包括使用input进行图片选择，通过canvas实现图片的长方形和圆形裁剪，并能够调整裁剪区域大小。此外还介绍了如何通过鼠标操作实现图片的缩放功能。
先上一个效果图，需求是上传图片，裁切图片，裁取出一个长方形的图和一个圆形图。
左边是上传图片部分，用的input，右边是两个canvas，移动左边的裁剪框，右边的会随着改变，也可放大图片，放大缩小范围是1-2。
主要讲思路：1.左边上传图片，用input的type='file’即可实现。
2.右边是canvas,主要难点是计算坐标。需熟悉学习下drawImage()参数的使用。圆形图实际上画的是正方形的图，利用border-radius熟悉即可显示为圆形图。
3.放大和缩小部分，以及拉动白色的圆点也可实现图片的放大和缩小，此部分知识点是c3的属性使用、鼠标在移动的过程中获取鼠标盒子上的位置。
gitHub地址：https://github.com/xiaoli0510/cut_pic
扫一扫
3373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
