H5调用相机拍照并压缩示例代码。

整理文档，搜索一个示例代码，H5调用相机拍照并压缩图片，然后进行排序和共享。

背景

最近，我想做一个H5页面。主要功能是调用相机或相册来选择地图。压缩图片base64后，上传到后台服务器。然后服务器返回识别结果。

前端的主要功能点是：

H5如何调用照相机
如何压缩图片
图片转BASE64
H5调用相机/相册

调用相机最简单的方法是使用输入文件{照相机}属性：
相机
相册
这种方法的兼容性仍然存在问题。它通常可以打开iPhone手机上的摄像头。但点击Android手机后，会出现诸如摄像头、图库、文件管理器等混合选项，在互联网上没有好的解决方案，只能继续写下去。

图像压缩

FileReader和图像压缩应用。

的FileReader对象允许Web应用程序读取内容的文件存储在计算机的情况，并使用文件或BLOB对象指定要读取的文件或数据。

它是一个HTML元素，可以用一个可以绘制图形和简单动画的脚本来绘制。

图像压缩应该压缩图像的分辨率和质量，压缩图像的分辨率。我将图片的最大边缘设置为800，另一面根据图片的原始比例进行缩放，或者设置图片的整体比例。
无功max_wh = 800；
新图像（）；
图像。指针函数（）{
如果（image.height > max_wh）{
缩放的宽度比*
image.width = max_wh / image.height；
image.height = max_wh；
}
如果（image.width > max_wh）{
缩放的宽度比*
image.height = max_wh / image.width；
image.width = max_wh；
}
}
图像。src= dataurl； / / dataurl是通过有
然后压缩图片的质量，设置为压缩80%，如果图像太小，图像会失真。动态创建标签，然后压缩图片：
var质量＝80；
VaR CVS = document.createelement（'canvas）；
cvs.width = image.width；
cvs.heigh = image.height；
VaR上下文= cvs.getcontext（2D）；
context.drawimage（形象，0, 0，image.width，图像高度）；
dataurl = cvs.todataurl（图像/ JPEG，质量 / 100）；
然后它被上传到服务器，并显示服务器的结果，但效果不是很好。在iOS手机被拍照和压缩后，图片被旋转并继续解决问题。

解决ios图片旋转

对exif.js第一参考是通过exif.getdata和exif.gettag获取图片的方向信息。
文件是通过输入标记获得的。
exif.getdata（文件、函数（）{（）{
定位= exif.gettag（文件、入门）；
}）；
下面是对应于iPhone移动摄像机的每个方向值的含义。
方向
描述

三
iPhone跨屏幕拍摄，此时Home键在左边，图片相对于原来的位置旋转180度。
六
iPhone垂直屏幕拍摄时，此时Home键位于下方（通常取手机的方向），图片相对于原来的位置是逆时针旋转，可以是90度。
八
iPhone垂直屏幕拍摄时，此时Home键位于顶部，图片相对于原来的位置顺时针方向顺时针90度。

获取图像的方向信息后，根据所获得的值进行相应的旋转操作。
开关（方向）{
案例6：
案例8：
cvs.width =高度；
cvs.height =宽度；
打破；
}
VaR上下文= cvs.getcontext（2D）；
开关（方向）{
iPhone水平屏幕拍摄，此时左手上的Home键
案例3：
180度向左转弯
context.translate（宽度，高度）；
context.rotate（数学，PI）；
打破；
iPhone垂直屏幕拍摄，此时Home键位于下方（通常采取手机的方向）
案例6：
context.rotate（0.5×数学。PI）；
context.translate（0，高度）；
打破；
iPhone垂直屏幕拍摄，此时主页键在上面。
案例8：
90度逆时针旋转
context.rotate（0.5×数学。PI）；
context.translate（宽度，0）；
打破；
}
然后上传图片，发现图片在iOS下是正常的。

下面给出完整的代码：
$（输入{类型=文件}）。变化（功能（e）{
var文件=这个文件{ 0 }；
无功mime_type = file.type；
var方向= 0；
如果（文件/ ^图像 / / i.test（文件类型））{
exif.getdata（文件、函数（）{（）{
定位= exif.gettag（文件、入门）；
}）；

VaR的读者= FileReader（）；
reader.onloadend =函数（）{
宽度、高度；
无功max_wh = 800；
新图像（）；
图像。指针函数（）{
如果（image.height > max_wh）{
缩放的宽度比*
image.width = max_wh / image.height；
image.height = max_wh；
}
如果（image.width > max_wh）{
缩放的宽度比*
image.height = max_wh / image.width；
image.width = max_wh；
}
压缩
var质量＝80；
VaR CVS = document.createelement（'canvas）；
cvs.width =宽度= image.width；
cvs.height =高度= image.height；

开关（方向）{
案例6：
案例8：
cvs.width =高度；
cvs.height =宽度；
打破；
}

VaR上下文= cvs.getcontext（2D）；

为解决iOS的图片旋转问题
开关（方向）{
iPhone水平屏幕拍摄，此时左手上的Home键
案例3：
180度向左转弯
context.translate（宽度，高度）；
context.rotate（数学，PI）；
打破；
iPhone垂直屏幕拍摄，此时Home键位于下方（通常采取手机的方向）
案例6：
context.rotate（0.5×数学。PI）；
context.translate（0，高度）；
打破；
iPhone垂直屏幕拍摄，此时主页键在上面。
案例8：
90度逆时针旋转
context.rotate（0.5×数学。PI）；
context.translate（宽度，0）；
打破；
}
context.drawimage（形象，0, 0，image.width，图像高度）；
dataurl = cvs.todataurl（图像/ JPEG，质量 / 100）；
获取识别结果
…
}
SRC = dataurl图像；
}；
reader.readasdataurl（文件）；
其他{ }
警报（）只能识别图片！）
}
}）；

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。