微信浏览器内兼容android iOS调取手机摄像头进行拍照、打水印、压缩、预览

实现这些功能使用了如下插件：

图片打水印：watermark.js(https://github.com/brianium/watermarkjs)

图片压缩：localResizeImg(https://github.com/think2011/localResizeIMG)

读取图片元数据：exif.js(https://github.com/exif-js/exif-js)

html部分

//调起摄像头按钮
<input type="file" id="file" accept="image/*" capture="camera">
//预览图片
<div id="fileBga"></div>
//放置压缩后图片的base64编码
<img id="fileBg" style="display:none;">

首先调取手机摄像头进行拍照

<input type="file" id="file" accept="image/*" capture="camera">

capture="camera"

是为了兼容部分安卓机型。这里使用

accept="image/*"

而不使用

accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"

是因为经测试华为部分机型在不使用”image/*”的时候无法调起摄像头，而是打开了文件管理器。

document.querySelector('#file').addEventListener('change', function() {
//监听input的change事件，存储用户拍摄的图片
var file = this.files[0];
EXIF.getData(file, function() {
var orientation = EXIF.getTag(this, 'Orientation');
//使用exif.js获取图片元数据
if (orientation == 6) {
//iOS系统拍摄图片上传的默认方向为home键在右的横屏模式
//通过exif.js获取的图片元数据的orientation值为6，以下兼容iOS
document.getElementById('fileBga').style.transform = 'rotate(90deg)';
var h = $('#fileBga').height();
var w = $('#fileBga').width();
$('#fileBga').height(w);
$('#fileBga').width(h);
//旋转放置预览图片的元素，并将宽高值交换
var rotate = function(target) {
//因为图片被旋转，所以调用插件其中一种canvas加水印的方法,方便打横置的水印
var context = target.getContext('2d');

a8a7
var text = 'puzzle-idea';
var metrics = context.measureText(text);
var x = (target.width / 2) - (metrics.width + 24);
var y = (target.height / 2) + 48 * 2;

context.translate(x, y);
context.globalAlpha = 0.5;
context.fillStyle = '#fff';
context.font = '200px 微软雅黑';
//旋转水印
context.rotate(-90 * Math.PI / 180);
context.fillText(text, 0, 0);
return target;
};

watermark([file])
//开始打水印
.image(rotate)
.then(function(img) {
//防止多次拍摄,初始化预览图片
$('#fileBga').html('');
document.getElementById('fileBga').appendChild(img);
var iOSsrc = img.src;
lrz(iOSsrc, { width: '100%' })
.then(function(rst) {
// 处理成功会执行
$('#fileBg').attr('src', rst.base64);
})
.catch(function(err) {
// 处理失败会执行
console.log(err);
})
});
} else {
watermark([file])
//安卓打水印
.image(watermark.text.center('puzzle-idea', '200px 微软雅黑', '#fff', 0.5))
.then(function(img) {
$('#fileBga').html('');
document.getElementById('fileBga').appendChild(img);
var Androidsrc = img.src;
lrz(Androidsrc, { width: '100%' })
.then(function(rst) {
// 处理成功会执行
$('#fileBg').attr('src', rst.base64);
})
.catch(function(err) {
// 处理失败会执行
console.log(err);
})
});
}
});
})