PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    uniapp H5 压缩图片

    作者:admin来源:网络浏览:时间:2021-09-07 10:07:31我要评论
    导读:uniapp H5 压缩图片
    uniapp  H5 压缩图片


    1. uni.chooseImage... 
    2.  
    3.   uni.getImageInfo({ 
    4.     src: res.tempFilePaths[0], 
    5.     success: (res) => { 
    6.       const blobUrl = res.path; 
    7.       const canvas = document.createElement("canvas"); 
    8.  
    9.       // 减少绘制的大小才能压缩,不然可能压缩后图片会变大 
    10.       canvas.width = res.width / 2; 
    11.       canvas.height = res.height / 2; 
    12.  
    13.       const ctx = canvas.getContext("2d"); 
    14.       let img = new Image(); 
    15.       img.src = blobUrl; 
    16.       img.error = uni.hideLoading; 
    17.       img.onload = () => { 
    18.         ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
    19.         const contentType = "image/png"
    20.         canvas.toBlob( 
    21.           async (blob) => { 
    22.             const blobUrl2 = window.URL.createObjectURL(blob); 
    23.             await _upload(blobUrl2); // 使用uniapp的文件上传api发送FormData数据 
    24.             window.URL.revokeObjectURL(blobUrl2); 
    25.             img = null
    26.           }, 
    27.           contentType, 
    28.           0.5 
    29.         ); 
    30.       }; 
    31.     }, 
    32.     fail: uni.hideLoading, 
    33.   }); 

     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-6612-1.html
    相关热词搜索: