JavaScript图片截取拖拽缩放功能
js 的图片截取功能，拖拽+缩放一把抓，像 QQ 截图那味儿就对了。整个流程靠的就是Canvas加事件监听这对老搭档——把图片画上去、用户拖动时更新截图框，再实时截取显示，体验还挺顺滑。
用原生 JS 搞，代码量不算少，比如拖动时得监听mousedown、mousemove，还得手动算位置偏移，嗯，有点累。不过你也可以用Cropper.js，这库封装得蛮全，拖拽、缩放、旋转全搞定，调用方式也挺优雅的：
var cropper = new Cropper(imageElement, {
aspectRatio: 1 / 1,
viewMode: 1,
dragMode: 'crop'
});Canvas 的drawImage()方法是个关键点，用得好的话你可以随心所欲地裁剪图像。再搭配toDataURL()，直接生成截图的 base64 图像，前端预览或者发后端都方便。
库的文件结构也比较清晰：cropper.js和cropper.uncompressed.js是主文件，tests目录是测试用例，lib里放着像 jQuery 这类依赖。
如果你想进一步研究，还有不少相关文章挺有意思，比如上传前截图、截图工具、html2canvas这类思路都不太一样，建议都看看。
如果你刚好在做上传头像、在线证件照裁剪这类需求，强烈建议先用 Cropper.js 试试看，配置灵活、社区活跃，用起来还挺爽。
文件大小：101.32KB
评论区