zoukankan      html  css  js  c++  java
  • 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];
    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);
    }

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

  • 相关阅读:
    微信公众号自定义菜单创建方法
    Oracle数据库导入导出
    关于vs启动调试报错:CS0016: 未能写入输出文件“xxxxxxxx”--“目录名称无效。”解决方法
    Window Server 2012无线网卡和声卡驱动解决方法
    NodeJS下载文件实例
    MSSQL大全
    SQL函数介绍
    SQLite语法
    Curl简单使用
    Python中的argparse模块的使用
  • 原文地址:https://www.cnblogs.com/rrene/p/9720417.html
Copyright © 2011-2022 走看看