java 手机 上传图片_在手机端使用拍照功能上传图片的功能的解决文案
主要依赖了一个compress.js的文件,文件内容如下:
```/*
* Tencent is pleased to support the open source community by making WeUI.js available.
*
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://opensource.org/licenses/MIT
*
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*//**
* 检查图片是否有被压扁,如果有,返回比率
* ref to http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
*/function detectVerticalSquash(img) {
// 拍照在IOS7或以下的机型会出现照片被压扁的bug
var data;
var ih = img.naturalHeight;
var canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = ih;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
try {
data = ctx.getImageData(0, 0, 1, ih).data;
} catch (err) {
console.log('Cannot check verticalSquash: CORS?');
return 1;
}
var sy = 0;
var ey = ih;
var py = ih;
while (py > sy) {
var alpha = data[(py - 1) * 4 + 3];
if (alpha === 0) {
ey = py;
} else {
sy = py;
}
py = (ey + sy) >> 1; // py = parseInt((ey + sy) / 2)
}
var ratio = (py / ih);
return (ratio === 0) ? 1 : ratio;}/**
* dataURI to blob, ref to https://gist.github.com/fupslot/5015897
* @param dataURI
*/function dataURItoBuffer(dataURI){
var byteString = atob(dataURI.split(',')[1]);
var buffer = new ArrayBuffer(byteString.length);
var view = new Uint8Array(buffer);
for (var i = 0; i
view[i] = byteString.charCodeAt(i);
}
return buffer;}function dataURItoBlob(dataURI) {
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var buffer = dataURItoBuffer(dataURI);
return new Blob([buffer], {type: mimeString});}/**
* 获取图片的orientation
* ref to http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
*/function getOrientation(buffer){
var view = new DataView(buffer);
if (view.getUint16(0, false) != 0xFFD8) return -2;
var length = view.byteLength, offset = 2;
while (offset
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) return -1;
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return view.getUint16(offset + (i * 12) + 8, little);
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return -1;}/**
* 修正拍照时图片的方向
* ref to http://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin
*/function orientationHelper(canvas, ctx, orientation) {
const w = canvas.width, h = canvas.height;
if(orientation > 4){
canvas.width = h;
canvas.height = w;
}
switch (orientation) {
case 2:
ctx.translate(w, 0);
ctx.scale(-1, 1);
break;
case 3:
ctx.translate(w, h);
ctx.rotate(Math.PI);
break;
case 4:
ctx.translate(0, h);
ctx.scale(1, -1);
break;
case 5:
ctx.rotate(0.5 * Math.PI);
ctx.scale(1, -1);
break;
case 6:
ctx.rotate(0.5 * Math.PI);
ctx.translate(0, -h);
break;
case 7:
ctx.rotate(0.5 * Math.PI);
ctx.translate(w, -h);
ctx.scale(-1, 1);
break;
case 8:
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-w, 0);
break;
}}/**
* 压缩图片
*/function compress(file, options, callback) {
const reader = new FileReader();
reader.onload = function (evt) {
if(options.compress === false){
// 不启用压缩 & base64上传 的分支,不做任何处理,直接返回文件的base64编码
file.base64 = evt.target.result;
callback(file);
return;
}
// 启用压缩的分支
const img = new Image();
img.onload = function () {
const ratio = detectVerticalSquash(img);
const orientation = getOrientation(dataURItoBuffer(img.src));
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const maxW = options.compress.width;
const maxH = options.compress.height;
let w = img.width;
let h = img.height;
let dataURL;
if(w maxH){
w = parseInt(maxH * img.width / img.height);
h = maxH;
}else if(w >= h && w > maxW){
h = parseInt(maxW * img.height / img.width);
w = maxW;
}
canvas.width = w;
canvas.height = h;
if(orientation > 0){
orientationHelper(canvas, ctx, orientation);
}
ctx.drawImage(img, 0, 0, w, h / ratio);
if(/image\/jpeg/.test(file.type) || /image\/jpg/.test(file.type)){
dataURL = canvas.toDataURL('image/jpeg', options.compress.quality);
}else{
dataURL = canvas.toDataURL(file.type);
}
if(options.type == 'file'){
if(/;base64,null/.test(dataURL) || /;base64,$/.test(dataURL)){
// 压缩出错,以文件方式上传的,采用原文件上传
console.warn('Compress fail, dataURL is ' + dataURL + '. Next will use origin file to upload.');
callback(file);
}else{
let blob = dataURItoBlob(dataURL);
blob.id = file.id;
blob.name = file.name;
blob.lastModified = file.lastModified;
blob.lastModifiedDate = file.lastModifiedDate;
callback(blob);
}
}else{
if(/;base64,null/.test(dataURL) || /;base64,$/.test(dataURL)){
// 压缩失败,以base64上传的,直接报错不上传
options.onError(file, new Error('Compress fail, dataURL is ' + dataURL + '.'));
callback();
}else{
file.base64 = dataURL;
callback(file);
}
}
};
img.src = evt.target.result;
};
reader.readAsDataURL(file);}export default {
compress};
```
文件中有多种bug处理,如,拍照在IOS7或以下的机型会出现照片被压扁的bug 、修正拍照时图片的方向、压缩图片等问题。
具体使用也大概说明一下,下例子使用用的是vue-cli
1, 引入 js 注在静态文件目录下,es6引入,,注意,导出的是对象,,且用的是default导出import compress from '@/assets/js/compress.js'
2, 下面是个人的使用方式,
```
```
说到这儿,懂些vue的大概就知道了,上面是一个当成组件的封装,还可以更完善,谢谢点赞。
java 手机 上传图片_在手机端使用拍照功能上传图片的功能的解决文案相关推荐
- 经典按键java手机游戏_随心所动 战无不胜 | 雷蛇骑仕手机游戏手柄评测
00 玩游戏之前 大家好,我是王小洋.感谢众测吧提供的评测产品. 每次提到手机游戏手柄无非就是两个话题:算外挂吗?手感好吗?算不算外挂这个就见仁见智了,不过好的游戏手柄确实能提高游戏的畅快感,不管是不 ...
- 经典按键java手机游戏_用诺基亚N95体验2G时代的JAVA手游,能正常运行吗?
5G时代的来临似乎有点快,尽管5G在有些地区还没有完全普及开来,不少人还在用只支持4G.3G的手机,甚至还有在用2G手机.但不可否认的是,手机是否支持5G俨然成为当下消费者买手机的第一关注点. 而这篇 ...
- 经典按键java手机游戏_用诺基亚N95体验2G时代的JAVA网游,能正常运行么
5G时代的来临似乎有点快,尽管5G在有些地区还没有完全普及开来,不少人还在用只支持4G.3G的手机,甚至还有在用2G手机.但不可否认的是,手机是否支持5G俨然成为当下消费者买手机的第一关注点. 而这篇 ...
- java手机浏览器_三款最热java手机浏览器横评(组图)
腾讯科技讯 5月26日消息,对于非智能机用户来说,有一款出色的Java手机浏览器是尽享手机冲浪乐趣的关键.目前,中国java手机浏览器市场,用户最热衷的莫过于OperaMini.UC浏览器7.7.手机 ...
- java 手机型号_手机型号大揭密
如今市场上国外品牌大致有MOTO.爱立信.索爱.西门子.诺基亚.三星和LG几个,它们的手机型号也是数不胜数,我们现在就来分门别类地将它们理出头绪来. 首先说说摩托罗拉吧,用价格来划分MO鄄TO的手机型 ...
- django手机访问_在手机上运行Python的神器
之前安利过一款手机上运行Python的神器Termux,不过Termux的使用比较重,它实际是一款linux系统模拟器,安装好Termux后还要再安装python,并且是全命令行操作,一些读者使用起来 ...
- java手机音乐_[JavaME]手机同时播放两个音乐 探讨一
[JavaME]手机同时播放两个音乐 探讨一 摘要: 本文档以及后续文档试图一步一步地探讨如何在手机上同时播放两个声音文件,譬如一个是背景音乐,一个是按键触发的游戏音效.请慢慢看下去,我们尽量糅合进各 ...
- java手机 上网_手机的浏览器能上网,但手机的JAVA程序不能上网
手机的浏览器能上网,但手机的JAVA程序不能上网 来源:互联网 宽屏版 评论 2010-03-11 17:05:00 分类: 电子数码 问题描述: 我的手机是V3I 网络设置如下 首先向运营商开通 ...
- 经典按键java手机游戏_盘点曾经红极一时的手机游戏,每款都是经典中的经典...
曾经在我们刚拥有智能手机的那个年代,几乎每个人都曾经尝试过几款手机游戏,或许是因为跟风,或许是因为好奇. 那些年流行过的游戏,它们大多没有很优秀的画质,玩法也大多单一,但是它们却有一种让人着迷的魔力, ...
最新文章
- 多线程、并发及线程的基础问题
- 【线上分享】如虎添翼,边缘计算在媒体性能与安全上的实现
- 视频云服务平台架构设计难点与趋势
- abc类ip地址_通信网络的IP地址分配原理
- c++代码健壮性_复活Navex-使用图查询进行代码分析(上)
- autodock tool文件_理解autodock分子对接思路和流程--系列导读
- 【信号处理】基于高阶统计量特征的通信系统中微弱信号检测附matlab代码
- 关闭445端口bat脚本
- 支教笔记 我在泸定的那十天
- Qt中关于emit和moc_*.cpp的自动生成
- 二级备考:ppt自学知识笔记--基础操作1:ppt界面介绍
- 长荣航空空服员受辱追踪:工会盼给当事人公伤假
- 微服务架构这马丁富勒的论文
- veket linux应用软件,Veket下载_Veket Linux(开源Linux操作系统)V5.192D完整版
- [重庆思庄每日技术分享]-oracle11g到ORACLE 816的dblink访问报 ORA-03150错误
- Bash cp 命令详解
- 【181018】基于MFC文档方式制作的飞碟射击游戏
- 贵州六盘水计算机二级考点,2017年六盘水第二次职称计算机考试报名通知
- STC89C52RC特点及引脚介绍
- 【调剂】浙江工业大学信息工程学院宣琦课题组诚招2020级研究生
热门文章
- DevOps/.NET 微服务 秋季分享会领优惠门票
- ASP.NET Core中Ocelot的使用:基于服务发现的负载均衡
- 分布式事务解决方案以及 .Net Core 下的实现(上)
- 关于.NET下开源及商业图像处理(PSD)组件
- html overflow 样式,css样式之overflow-x属性样式
- Linux中的vi和vim
- slq2000数据库升级到sql2012
- 【BIM入门实战】Revit2018项目模板、族库图文安装教程
- 【ArcGIS风暴】实验:公路建设成本的计算
- IOS之学习笔记十五(协议和委托的使用)