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];
console.log(img1,'img111')
var reg = new RegExp(/jpg|jpeg|png|gif/);
//验证是否是一张图片
if(!reg.test(img1.type.substr((img1.type.lastIndexOf('/')+1)))){
return;
}

//读取图片数据
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);
}

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

ios兼容的更多相关文章

  1. h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)

    前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决 下载地址:下载地址: https://github.com/zenorocha/clipboard.js cnd ...

  2. 小程序 ----踩坑 ---安卓iOS兼容等

    关于小程序一些小功能的代码都在这个GitHub上,感兴趣的可以去看看,https://github.com/huihuijiang/miniProgram目前有:列表左滑删除,拖拽浮标 一.小程序坑1 ...

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

    Clipboard 自动复制功能,嵌套app内跳转的页面,ios 自动复制失败(该ios机子,微信,浏览器打开复制没有问题) 暂时换方案    user-select: text ;长按复制 (ios ...

  4. ios 兼容IPV4和IPV6网络通信

    前言: 苹果官方出了新的规定,要求新上架的app都必须单独支持ipv6-only的网络. 准备工作: 搭建IPV6测试环境:http://blog.csdn.net/potato512/article ...

  5. 移动端网页 -- 安卓与IOS兼容

    1.在a链接长按时,ios系统会识别并复制a链接中的href值,而安卓不会,只会选择复制文字 关于长按复制其他区域内容:pc端可以实现,在移动端目前还没有找到解决方案,很多都是基于flash的 2.i ...

  6. 安卓和IOS兼容问题

    点击穿透 click延迟 scroll元素临界的bug android screen.w/h 不准 rem不准 scroll时动画失效 animate回调 最小字号限制 不同机型全屏自适应 andro ...

  7. ios兼容 iphoneX ios10 ios11

    假设你有一个固定位置的标题栏,你的iOS10的CSS可能是这样写的: header { position: fixed; top:; left:; right:; height: 44px; padd ...

  8. 记H5单页遇到的几个ios兼容问题

    最近写一个H5活动页,安卓里的表现很不错,写下来很少出现兼容性问题,ios就不一样了,好多问题都出现在ios上(手动狗头)

  9. 混合开发中ios兼容问题

    1. z-index无效,设置层级,发现再ios中无效,后来发现是设置了 -webkit-overflow-scrolling:touch 设置这个属性之后.层级设置失效 2.@keyup事件的问题, ...

随机推荐

  1. Linux添加vsftp账户和设置目录权限

    改变store下面的所有.php文件属主为ftpd[root@www ~]# chgrp ftpd /store/*.php[root@www ~]# chown ftpd /store/*.php ...

  2. SVM支持向量机实例

    波士顿房价回归分析 1.导入波士顿房价数据集 ############################# svm实例--波士顿房价回归分析 ############################## ...

  3. 【前端开发】nrm切换淘宝镜像&nvm管理node版本及切换

    说明:nrm是切换淘宝镜像用的,nvm是node的版本切换用的(可在自己电脑安装多个版本node,便于不同项目的支持) 一.nrm的安装及常见命令: 安装nrmnpm install -g nrm 查 ...

  4. 【前端开发】ES6知识点系统化梳理笔记

    >ES6扩展: #Map和Set是es6标准新增的数据类型 ##Map是key-value(关键字-值),Map允许修改value,不允许修改key,Map支持下标操作 var m = new ...

  5. CentOS7安装CDH 第十三章:CDH资源池配置

    相关文章链接 CentOS7安装CDH 第一章:CentOS7系统安装 CentOS7安装CDH 第二章:CentOS7各个软件安装和启动 CentOS7安装CDH 第三章:CDH中的问题和解决方法 ...

  6. 第四篇:python基础之杂货铺

    在这一篇中我们将对上几篇的Python零碎的知识进行补充,即字符串的格式化输出,以及深浅拷贝,接下来我们将对这两种进行一一介绍. 一.字符串格式化输出 关于字符串的格式化输出,我们需要了解为什么需要字 ...

  7. ORA-03113:通信通道的文件结尾 解决办法

    登录Oracle时出现错误:“ORA-03113:通信通道的文件结尾” 错误排查方法 Oracle出现错误,查看trace日志寻找问题根源:D:\oracle\diag\rdbms\orcl\orcl ...

  8. LVS工作原理及集群类型

    Cluster概念 Cluster:集群,为解决某个特定问题将多台计算机组合起来形成的单个系统 Linux Cluster类型: LB:Load Balancing,负载均衡 HA:High ...

  9. jQuery隐藏和显示从上往下的实现方法

    jquery 显示隐藏方法实现动画效果 方向 显示 隐藏 左上角到右下角 show() hide() 垂直向下 slideDown() slideUp() 水平与垂直两个方向 toggle() 垂直向 ...

  10. PL/SQL块与表达式

    一.块(Block) 是PL/SQL的基本执行单元,由定义部分,执行部分(必须)和例外处理部分组成. Declare /*定义部分――定义常量.变量.游标.例外.复杂数据类型*/ Begin /*执行 ...