图片拍照上传解决方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片拍照上传解决方案相关的知识,希望对你有一定的参考价值。

参考技术A

微信内置浏览器,和一些主流浏览器支持调用摄像头,但也有很多不支持调用摄像头,仅支持相册。
如果是WebView中,就需要客户端支持了,androidios的权限也是问题。

formData 简介

简单的说就是:通过formData,我们可以用ajax方式来发送表单数据;以前上传图片是需要用form表单提交的。

我们知道浏览器默认显示的文件上传按钮是很丑的,通常UI都会对上传按钮进行设计。有以下几种方案来写样式。

弊端:

通过ref获取上传按钮。

ref方式

event.target方式

坑:

FileReader 简介

通过 readAsDataURL() ,在读取操作完成后,result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容。

base64字符串

兼容性

我在safari中测试,发现是支持的。

URL.createObjectURL 简介

通过URL.createObjectURL()创建一个URL对象,这个URL对象表示指定的file对象或Blob对象。

兼容性

张鑫旭的文章: html5 file API加canvas实现图片前端JS压缩并上传

张鑫旭的文章: 理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

使用Camera API
张鑫旭

以上是关于图片拍照上传解决方案的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序拍照和上传图片实现

移动端图片上传旋转压缩的解决方案

使用base64编码传图片

使用base64编码传图片

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

学海拾贝苹果手机拍照照片旋转问题及解决方案