【超硬核】人脸剪裁、录音、摄像、头像修改、预览图像【宝藏级】

qiqiyuer

于 2024-04-13 18:11:05 发布

阅读量570

点赞数 29

分类专栏：程序员文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qiqiyuer/article/details/137721578

版权

178 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端应用中选择、预览图片，重点关注了使用URL.createObjectURL和FileReader的方法，并推荐了cropperjs库进行图片裁剪。还讨论了如何通过canvas进行图片上传，以及提供了一份前端开发学习资料和面试题汇总。

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

下面再来谈谈预览图片的实现。

2.预览图片

不使用图片预览,点击上传图片后无法查看例如下图:我重新换了图片,图片路径变了,但图片没变

2.1添加图片预览代码

图片变了可以预览查看

源码1: 使用 URL.createObjectURL 预览

Document

源码2:使用 FileReader 预览

Document

预览图片总结:

我个人更加倾向于使用 URL.createObjectURL() 。主要原先它的 API 简洁，同步读取，并且他返回的是一个 URL ，比 FileReaer 返回的base64 更加精简。兼容性上，两者都差不多，都是在 WD 的阶段。性能上的对比, 在 chrome 上, 选择了一张 2M 的图片, URL.createObjectURL() 用时是 0 , 而 FileReader 用时 20ms 左右。 0 感觉不太合理，虽然这个方法立刻就会返回一个 URL ，但是我猜测实际上这个 URL 指定的内容还没有生成好，应该是异步生成的，然后才渲染出来的。所以并没有很好的办法来对比他们的性能。

3.裁剪图片

关于图片的裁剪，很自然的会想到使用 canvas ，确实是要通过 canvas, 但是如果全部我们自己来实现，可能需要做比较多的工作，所以为了省力，我们可以站在巨人的肩膀上。比较优秀的图片裁剪库是cropperjs , 该库可以对图片进行缩放、移动和旋转。随后会持续更新canvas,(我也在学…永远保持谦逊,人外人天外天,拒绝凡尔赛 )

cropperjs 的详细配置这里就不展开了 ,需要的可以自己去看文档就好。下面我们就以这个库为基础，实现一个裁剪人脸的例子：

源码: 当然这个只是简单的写下,为了写博客在电脑操作小伙伴要自行查看下移动端兼容

Document

请将面部区域置于人脸框架内

确认

4.上传

前面的操作已经完成了图片上传前的准备，包括选择图片、预览图片、编辑图片等，那接下来就可以上传图片了。上面的例子中，使用了 cropperInstance.getCroppedCanvas() 方法来获取到对应的 canvas 对象。有了 canvas 对象就好办了，因为 canvas.toBlob() 方法可以取得相应的 Blob 对象，然后，我们就可以把这个 Blob 对象添加到 FromData 进行无刷新的提交了。大概的代码如下：

change(e) {

// 1.手写的input需要一个对象将本地图片转换为对应的格式来上传

let formData = new FormData();

//2. e.target.files就是选中的图片的一个

formData.append(“file”, e.target.files[0]);

// 3. 将formData这个对象传给修改头像的接口

updateImg(formData).then((res) => {

//4.此时已经传到修改头像接口了

//4.1 传到修改头像的接口后 , 在更新接口中再次更新头像属性

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。