小程序图片压缩

1430阅读　0评论2019-05-07　拾忆1765207585
分类：JavaScript


点击(此处)折叠或打开

  1. <view class='img' bindtap='img'>上传文件</view>
  2. <canvas class='canvas' canvas-id='myCancas' style="width:{{width}}px;height:{{height}}px;background:red;"></canvas>
  3. <view class='img_box'><image wx:for="{{arr}}" src="{{item}}" mode='widthFix'></image></view>


点击(此处)折叠或打开

  1. page{
  2.   position: relative;
  3. }
  4. .img_box{
  5.   /* display: flex;
  6.   justify-items: center;
  7.   align-items: center; */
  8.   text-align: center;
  9. }
  10. .canvas{
  11.  position:absolute;
  12.   top:-999999999999999999999rpx;
  13.   left:0;

  15. }


点击(此处)折叠或打开

  1. // pages/upfile/upfile.js
  2. const ctx = wx.createCanvasContext("myCancas", this)
  3. Page({

  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.    arr:[]
  10.   },

  12.   /**
  13.    * 生命周期函数--监听页面加载
  14.    */
  15.   onLoad: function (options) {

  17.   },

  19.   /**
  20.    * 生命周期函数--监听页面初次渲染完成
  21.    */
  22.   onReady: function () {

  24.   },

  26.   /**
  27.    * 生命周期函数--监听页面显示
  28.    */
  29.   onShow: function () {

  31.   },

  33.   /**
  34.    * 生命周期函数--监听页面隐藏
  35.    */
  36.   onHide: function () {

  38.   },

  40.   /**
  41.    * 生命周期函数--监听页面卸载
  42.    */
  43.   onUnload: function () {

  45.   },

  47.   /**
  48.    * 页面相关事件处理函数--监听用户下拉动作
  49.    */
  50.   onPullDownRefresh: function () {

  52.   },

  54.   /**
  55.    * 页面上拉触底事件的处理函数
  56.    */
  57.   onReachBottom: function () {

  59.   },

  61.   /**
  62.    * 用户点击右上角分享
  63.    */
  64.   onShareAppMessage: function () {

  66.   },
  67.   img:function(e){
  68.     var that =this
  69.     wx.chooseImage({
  70.       success: function(res) {
  71.         console.log(res.tempFilePaths)
  72.         var img_arr = res.tempFilePaths
  73.         that.canvas_show(0,img_arr)
  74.       }
  75.     })
  76.   },
  77.   canvas_show: function (index, img_arr){
  78.     var that = this;
  79.    wx.showLoading({
  80.      title: '加载中',
  81.      icon:'loading'
  82.    })
  83.     if (index < img_arr.length){
  84.       wx.getImageInfo({
  85.         src: img_arr[index],
  86.         success: function (res) {
  87.           console.log("获取的图片结果", res)
  88.           var originHeight = res.height,
  89.             originWidth = res.width;
  90.           var maxWidth = 800,
  91.             maxHeight = 400;
  92.           // 目标尺寸
  93.           var targetWidth = originWidth,
  94.             targetHeight = originHeight;
  95.           //等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先
  96.           if (originWidth > maxWidth || originHeight > maxHeight) {
  97.             if (originWidth / originHeight > maxWidth / maxHeight) {
  98.               // 要求宽度*(原生图片比例)=新图片尺寸
  99.               targetWidth = maxWidth;
  100.               targetHeight = Math.round(maxWidth * (originHeight / originWidth));
  101.             } else {
  102.               targetHeight = maxHeight;
  103.               targetWidth = Math.round(maxHeight * (originWidth / originHeight));
  104.             }
  105.           }
  106.           that.setData({
  107.             width: targetWidth,
  108.             height: targetHeight
  109.           },()=>{
  110.             setTimeout(()=>{
  111.               ctx.drawImage(img_arr[index], 0, 0, res.width, res.height, 0, 0, targetWidth, targetHeight);
  112.               ctx.draw(false, function (res) {
  113.                 console.log(res)
  114.                 //输出图片文件
  115.                 new Promise((resolve, reject) => {
  116.                   wx.canvasToTempFilePath({
  117.                     canvasId: 'myCancas',
  118.                     success: function (res) {
  119.                       // console.log("生成图片的结果", res.tempFilePath)
  120.                       resolve(res.tempFilePath)
  121.                     }
  122.                   }, this)
  123.                 }).then(res => {
  124.                   console.log("生成图片的结果", res)
  125.                   that.setData({
  126.                     arr: that.data.arr.concat(res)
  127.                   })
  128.                   
  129.                   index = index + 1;
  130.                   that.canvas_show(index, img_arr)
  131.                   wx.hideLoading()
  132.                 })
  133.               })

  135.             },1000)
  136.            
  137.           })
  138.         }
  139.       })
  140.      
  141.     }


  144.   }
  145. })

上一篇：小程序request 封装方法
下一篇：小程序自定义导航条