zoukankan      html  css  js  c++  java
  • Uniapp H5 上传图片的压缩问题

     1 <template>
     2     <view class="content">
     3         <view @tap="ChooseImage()">点击上传图片</view>
     4     </view>
     5 </template>
     6 
     7 <script>
     8     export default {
     9         data() {
    10             return {
    11                 title: 'Hello'
    12             }
    13         },
    14         onLoad() {
    15 
    16         },
    17         methods: {
    18             ChooseImage() {
    19                 uni.chooseImage({
    20                     count: 1,
    21                     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
    22                     sourceType: ['album'], //从相册选择
    23                     success: res => {
    24                         const imgSize = res.tempFiles[0] && res.tempFiles[0].size ? res.tempFiles[0].size : 0;
    25                         const imgName = res.tempFiles[0]&&res.tempFiles[0].name?res.tempFiles[0].name:'';
    26                         console.log(imgSize)
    27                         this.photoCompress(res.tempFiles[0], (base64Codes) => {
    28                             var fl = this.dataURLtoFile(base64Codes,imgName)
    29                             console.log(fl, "压缩后的文件")
    30                         })
    31                     }
    32                 })
    33             },
    34             photoCompress(file, objDiv) {
    35                 var ready = new FileReader();
    36                 ready.readAsDataURL(file);
    37                 const _this = this;
    38                 ready.onload = function() {
    39                     var fileResult = this.result;
    40                     _this.canvasDataURL(fileResult, objDiv)
    41                 }
    42             },
    43             canvasDataURL(path, callback) {
    44                 var img = new Image();
    45                 img.src = path;
    46                 var objCompressed = {}
    47                 img.onload = function() {
    48                     var that = this;
    49                     //默认压缩后图片规格
    50                     var quality = 0.7;
    51                     var w = that.width;
    52                     var h = that.height;
    53                     var scale = w / h;
    54                     //实际要求
    55                     w = objCompressed.width || w;
    56                     h = objCompressed.height || (w / scale);
    57                     //生成canvas
    58                     var canvas = document.createElement('canvas');
    59                     var ctx = canvas.getContext('2d');
    60                     // 创建属性节点
    61                     var anw = document.createAttribute("width");
    62                     anw.nodeValue = w;
    63                     var anh = document.createAttribute("height");
    64                     anh.nodeValue = h;
    65                     canvas.setAttributeNode(anw);
    66                     canvas.setAttributeNode(anh);
    67                     ctx.drawImage(that, 0, 0, w, h);
    68 
    69                     var base64 = canvas.toDataURL('image/jpeg', quality);
    70                     // 回调函数返回base64的值
    71                     callback(base64);
    72                 }
    73             },
    74             dataURLtoFile(dataurl,filename) {
    75                 var arr = dataurl.split(","),
    76                     mime = arr[0].match(/:(.*?);/)[1],
    77                     bstr = atob(arr[1]),
    78                     n = bstr.length,
    79                     u8arr = new Uint8Array(n);
    80                 while (n--) {
    81                     u8arr[n] = bstr.charCodeAt(n);
    82                 }
    83                 return new File([u8arr],filename,  { type: mime });
    84             }
    85         }
    86     }
    87 </script>
    88 
    89 <style>
    90     
    91 </style>
  • 相关阅读:
    右下角老弹出盗版提示,以及登录界面出现正版验证对话框
    动态TSQL语句常見問題與解決方案
    验证码
    远程调用存储过程
    windows powershell
    屏蔽IE浏览器的刷新(不包括单个刷新按钮)
    获取数据库中的数据库有多少个
    网页刷新方法集合
    Win7中IIS7安装配置
    sql 根据字段查表名
  • 原文地址:https://www.cnblogs.com/luorende/p/14816682.html
Copyright © 2011-2022 走看看