ios兼容

border-radius在ios的兼容:-webkit-appearance:none;  加上这个属性,可以保证安卓和ios的圆角一致



上传图片,这段没有代码没有管图片拍摄的方位,

var _this = this;
var target = e.target;
var FileReadered = new FileReader();
var image = new Image();
let img1 = e.target.files[0];
//读取图片数据
FileReadered.readAsDataURL(img1);
//读取后做的操作
FileReadered.onload = function(e){
image.src = e.target.result;
image.onload = function(){
let imgWidth = image.width;
let imgHeight = image.height;
let quality = 0.3;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//压缩开始
if(imgWidth >= imgHeight && imgWidth > 750){
imgWidth = 750;
imgHeight = Math.ceil(750 * this.height / this.width);
}else if(imgWidth < imgHeight && imgHeight > 1334){
imgWidth = Math.ceil(1334 * this.width / this.height);
imgHeight = 1334;
}
canvas.width = imgWidth;
canvas.height = imgHeight;
//画画开始
ctx.drawImage(image, 0, 0, imgWidth, imgHeight);
//把canvas的图片转为url
let cdata = canvas.toDataURL("image/jpeg",quality);
img1= _this.dataURLtoFile(cdata,img1.name);
console.log(img1,‘img111‘)
//上传开始
target.value = ‘‘;
if (!img1.size) {return}
if ( img1.size > 4194304) {
//图片大于4M
this.$vux.toast.text(‘上传头像小于4M‘);
return;
}
let form = new FormData();
form.append(‘file‘,img1);
let config = {
headers:{‘Content-Type‘:‘multipart/form-data‘}
};
_this.$http.post(‘/file/upload?token=‘+localStorage.getItem(‘token‘),form,config).then(res=>{
let arr = ‘userfiles‘+res.data.split(‘userfiles‘)[1];
console.log(arr,‘arr‘)
_this.customer.customerPortrait = arr;
_this.$http.post(‘/customer/update‘,_this.customer).then(ress=>{
if (ress.data.code===0) {
_this.imgAddress = res.data;
console.log(_this.imgAddress,‘this.imgAddress‘)
}
})
})
}
};

import EXIF from ‘exif-js‘ 这个文件是用来做手机拍摄方位的;

EXIF.getData(file, function () {
  Orientation = EXIF.getTag(this, ‘Orientation‘);   //用变量来接收拍摄方位
});

if (Orientation && Orientation != 1) {
switch (Orientation) {
case 6:
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, 0, -imgHeight, imgWidth, imgHeight);
break;
case 3:
ctx.rotate(Math.PI);
ctx.drawImage(image, -imgWidth, -imgHeight, imgWidth, imgHeight);
break;
case 8:
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(3 * Math.PI / 2);
ctx.drawImage(image, -imgWidth, 0, imgWidth, imgHeight);
break;
}
} else {
ctx.drawImage(image, 0, 0, imgWidth, imgHeight);
}

最后这段判断是判断图片方位,暂时没有仔细去看;

原文地址:https://www.cnblogs.com/rrene/p/9720417.html

时间: 2024-10-17 14:42:42

ios兼容的相关文章

iOS兼容问题-transform

iOS兼容问题-transform 最近在弄一个bug,公司在弄一个阅读器的软件,在阅读页点击下面的导航目录时,目录能够从左至右的方向缓慢出来,用的 transform: translate(255px, 0px) translateZ(0px):  //目录出现 transform: translate(0px, 0px) translateZ(0px);    //目录隐藏 来进行目录的显示和隐藏.在安卓手机能够自由切换,并且页面正常但是在苹果手机上就不行.在苹果手机上进行阅读是点击目录然后

Clipboard 自动复制功能,ios复制失败,换方案 user-select: text ;长按复制 (ios 兼容,长按复制)

Clipboard 自动复制功能,嵌套app内跳转的页面,ios 自动复制失败(该ios机子,微信,浏览器打开复制没有问题) 暂时换方案    user-select: text ;长按复制 (ios 兼容低版本,长按复制) 最好的 方案是让 app 给出原生复制的 方法.直接调用 可 自动复制 <div class="item-detail"> <div class="line" style>  <!-- user-select: t

ios 兼容IPV4和IPV6网络通信

前言: 苹果官方出了新的规定,要求新上架的app都必须单独支持ipv6-only的网络. 准备工作: 搭建IPV6测试环境:http://blog.csdn.net/potato512/article/details/51680203 问题的提出: 在ios应用的开发中,如果项目中网络层用的是SOCKET 底层 的api.需要在工程做 兼容ipv4和ipv6网络环境的处理. 解决方案: 服务器地址配置为域名,通过解析域名的方式,得到 该域名映射的ip地址,再通过这个ip地址,去进行网络通信. 我

移动端ios兼容问题

IOS系统bug: 1)input无法输入的问题: -webkit-user-select:none;改成-webkit-user-select:auto: 2)滚动不流畅(overflow-y:auto) -webkit-overflow-scrolling: touch; 注:此属性和overflow-y:auto冲突 原文地址:https://www.cnblogs.com/web-wjg/p/8578987.html

ios兼容webp格式的图片

小程序的富文本编辑框里上传了webp格式的图片,安卓手机可显示,IOS手机不能正常显示,解决办法: filterTag (str) { if (str) { let mapObj = {} mapObj['<img'] = '<img style=\"max-width:100%;height:auto;\"' mapObj['article>'] = 'div>' mapObj['header>'] = 'div>' mapObj['footer&

select标签模拟placeholder属性与一般操作(最重要的是ios某一项被选中的兼容)

1.为了统一样式,常常要模拟placeholder <select> <option disabled selected hidden>请选择</option> <option>what</option> <option>the</option> <option>hell</option> </select> 2.select选中的值和某个值要被选中(ios兼容) <select

ipa包兼容性大作战!WeTest iOS深度兼容测试全新升级

2018年,移动端适配话题热闹无比,有iOS新版本新机型发布,全面屏.异形屏.曲面屏争相斗艳,从而产生了各类特殊的屏幕分辨率设备. 正是因为这些特殊分辨率,导致2018年手机设备频繁出现适配问题,如屏幕显示不全.双边未占满.顶部导航栏高度不对导致部分被遮挡,包括之前经常被用户提及的黑屏.闪退.安装失败等问题.特别是iOS设备在18年推出三款新的 iPhone:6.1英寸的iPhone XR.5.8英寸的iPhone XS.6.5英寸的iPhone XS Max.加上iOS版本升级成iOS 12,

BearSkill纯代码搭建iOS界面

欢迎相同喜欢动效的project师/UI设计师/产品增加我们 iOS动效特攻队–>QQ群:547897182 iOS动效特攻队–>熊熊:648070256 浅谈一下 关于iOS兼容布局一直都是开发人员经常面对的问题,随着代码量的增加,非常多人也有了一套自己的布局理论.本人也做了不少项目.開始用的Storyboard,xib.约束布局.由于是做的大多是应用型App.对于横竖屏的切换不是非常多.所以约束的长处我们用的非常少. 随着项目变的越来越大,每次需求变动修改或者复用界面时都会有无必要的触碰到

IOS音频1:之采用四种方式播放音频文件(一)AudioToolbox AVFoundation OpenAL AUDIO QUEUE

本文转载至 http://blog.csdn.net/u014011807/article/details/40187737 在本卷你可以学到什么? 采用四种方法设计应用于各种场合的音频播放器: 基于AudioToolbox.framework框架.播放系统声音文件. 基于AVFoundation.framework框架.播放多种音频格式文件.具有高级音频播放器功能.如实时显示进度.功率,控制音量.播放时间等. 基于OPENAL框架.实现对本地音频文件播放,播放pcm音频文件,3D音频特效. 基