快3网上购买

小程序中上传照片并进行压缩(二)

电脑杂谈  发布时间:2019-09-03 07:04:23  来源:网络整理

微信小程序图片上传_小程序asp上传图片_上传图片 asp

上一篇文章说了,一些简单的小程序上传的内容,我在这纠正下错误,那个也是上传到页面,在页面上把照片缩小了,显示在页面上,那个连接还是可以传的小程序asp上传图片,但真正的压缩并没有实现,今天说下另外一种压缩方式,上一张图让你们看的直白些。

上传图片 asp_微信小程序图片上传_小程序asp上传图片

这里就不让他去选择菜单了,不会的话请看上一篇文章(选择是拍照还是本地),这里上传照片直接开启到本地去获得

小程序asp上传图片_上传图片 asp_微信小程序图片上传

小程序asp上传图片_微信小程序图片上传_上传图片 asp

还是上代码 ,里面都有一些我自己理解的注释

小程序asp上传图片_上传图片 asp_微信小程序图片上传

var util = require('../../utils/util.js')
var app = getApp()
Page({
  data: {
   
  },
  // 绘制图片到canvas上
  drawCanvas: function (res) {
    const ctx = wx.createCanvasContext('myCanvas');//创建画布
    var that = this;
    var _w = res.width,//创建宽高等于获取到的宽高
        _h = res。height;
    this.setData({ _w: _w, _h: _h})//传输到视图层
    ctx.drawImage(res.path,0, 0, _w, _h);//画布中展示图片大小
    wx.showLoading({title:"压缩中..."})//运行压缩输出文字(显示loading)
    let timer = setTimeout(function(){//定时事件,和展示图片与wx。showLoading关系密切
      ctx.draw();//回调函数
      wx.canvasToTempFilePath({//把当前画布指定区域的内容导出生成指定大小图片,并返回文件路径
        canvasId:"myCanvas",//画布id
        quality:0.5,//图片质量,取值范围在(0,1】
        success:function(res){
          console。log(res。tempFilePath)//给后台传输这个地址
          wx.hideLoading()//隐藏loading
          clearTimeout(timer);//关闭定时器
          timer = null;//把定时器制null
        }
      })
    },2000)
  },
  selectImage(){
    var that = this;
    wx.chooseImage({
      count:1,
      sizeType: ['original', 'compressed'],//是否是压缩还是原图
      sourceType: ['album', 'camera'],//是拍照还是本地获取
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;//赋值
        that.setData({ tempFilePaths: tempFilePaths })//发送从逻辑层发送到视图层
        that.saveImage(that.data.tempFilePaths)//运行事件
      }
    })
  },
  saveImage: function (imageArr) {
    for (var i = 0, item; item = imageArr[i++];){//遍历
      this.getImageInfo(item);
    }
  },
  getImageInfo(src){
    var that = this;
    wx。getImageInfo({//获取图片信息
      src: src,
      success:function(res){
        that.drawCanvas(res);//成功去进行压缩事件
      }
    })
  }
})

最后写一个传输方式小程序asp上传图片,把里面的地址传给后台就可以了,遍历是为了传多张图片,但是最后效果没有达到,只能传一张图片了,大神们谁有更好的方法,或无法传多张图片的方式,请告诉下我


本文来自电脑杂谈,转载请注明本文网址:
http://www.kadakong.com/a/ruanjian/article-121530-1.html

    相关阅读
    发表评论  请自觉遵守互联网相关的政策法规,严禁发布、暴力、反动的言论

    • 郝璐
      郝璐

      要什么大国形象

    • 姬秋
      姬秋

      快3网上购买及时发扬国际主义精神

      • 胡洁亮
        胡洁亮

        虚构诋毁攻击竞争对手

    • 金煜麒
      金煜麒

      驻日美军和周边美军不会在旁看热闹

    快3网上投注 快3平台 彩票微信红包群二维码大全 冠军彩票开奖 王者彩票APP pk10怎么玩 快赢彩票登陆 恒彩彩票计划 冠军彩票投注 快3网上购买