微信浏览器内兼容android iOS调取手机摄像头进行拍照、打水印、压缩、预览
2017-12-22 18:05
721 查看
实现这些功能使用了如下插件:
图片打水印:watermark.js(https://github.com/brianium/watermarkjs)
图片压缩:localResizeImg(https://github.com/think2011/localResizeIMG)
读取图片元数据:exif.js(https://github.com/exif-js/exif-js)
图片打水印: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); }) }); } }); })
相关文章推荐
- 微信或手机浏览器在线显示office文件(已测试ios、android)
- 利用Android手机里的摄像头进行拍照
- 利用Android手机里的摄像头进行拍照
- PHP 使用 微信JSSDK 拍照选择图片接口 利用localid预览时 安卓手机正常显示 iOS手机不显示
- 微信或手机浏览器在线显示office文件(已測试ios、android)
- 利用Android手机里的摄像头进行拍照
- 基于Swift的iOS应用程序开发:使用UIImagePickerController调取摄像头进行拍照
- 微信或手机浏览器在线显示office文件(已测试ios、android)
- 使用谷歌浏览器模拟微信(android或ios)浏览器
- input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决
- 浏览器网页判断手机是否安装IOS/Android客户端程序
- Android微信分享图片大于32k进行压缩
- 一个PHP文件搞定支付宝系列之手机网站支付(兼容微信浏览器)
- 微信小程序开发之IOS/Android兼容坑(持续更新)
- Android拍照得到全尺寸图片并进行压缩
- Android自定义照相机 预览拍照 切换前后置摄像头
- JS调用本地摄像头拍照(兼容各大浏览器及IE8+)
- 微信开发 调取相机兼容苹果手机
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传
- Android调用系统摄像头拍照并剪裁压缩