本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能,分享给大家,具体如下:
实现效果:
裁切指定区域内的图片
旋转图片
放大图片
输出bolb 格式数据 提供给 formData 对象
效果图
大概原理:
利用h5 FileReader 对象, 获取 <input type=”file”/> “上传到浏览器的文件” ,文件形式 为base64形式, 把 base64 赋给canvas的上下文。
然后给canvas 元素上加入对(mousedown)监听事件。 当用户鼠标左键在canvas按下时:
挂载对 window 对象mouse