zoukankan      html  css  js  c++  java
  • 微信小程序把玩(三十二)Image API

    这里写图片描述

    选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用

    主要方法:

    wx.chooseImage(object)

    这里写图片描述

    wxml

    <!--监听按钮-->
    <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button>
    <!--通过数据绑定的方式动态获取js数据-->
    <image src="{{source}}" mode="aspecFill" style=" 640rpx; height: 640rpx"/>
    

    js

    Page({
      data:{
        // text:"这是一个页面"
        source: ''
      },
      /**
       * 选择相册或者相机 配合上传图片接口用
       */
      listenerButtonChooseImage: function() {
          var that = this;
          wx.chooseImage({
              count: 1,
              //original原图,compressed压缩图
              sizeType: ['original'],
              //album来源相册 camera相机 
              sourceType: ['album', 'camera'],
              //成功时会回调
              success: function(res) {
                  //重绘视图
                  that.setData({
                      source: res.tempFilePaths
                  })
              }
          })
      },

    wx.previewImage(object)

    这里写图片描述

    这又是一个奇葩API真实搞不懂怎么用这个。先模仿下官方咋使用但是没有效果,搞懂了在补充下自己的使用

    wxml

    <!--图片预览-->
    <button type="primary" bindtap="listenerButtonPreviewImage">展示图片</button>

    js

    Page({
      data:{
        // text:"这是一个页面"
        source: ''
      },
    
      /**
       * 预览图片 又一个奇葩接口
       */
      listenerButtonPreviewImage: function() {
          wx.previewImage({
              current: 'http://img.souutu.com/2016/0511/20160511055648316.jpg',
              urls: [
                  'http://img.souutu.com/2016/0511/20160511055648316.jpg',
                   'http://img.souutu.com/2016/0511/20160511055650751.jpg',
                   'http://img.souutu.com/2016/0511/20160511054928658.jpg'
                   ],
                   //这根本就不走
                   success: function(res) {
                       console.log(res);
                   },
                   //也根本不走
                   fail: function() {
                       console.log('fail')
                   }
          })
      }
    
    
    })
  • 相关阅读:
    Java设计模式-装饰器模式
    【c++内存分布系列】单独一个类
    【转】LCS
    快速排序
    冒泡排序
    选择排序
    多线程读取全局变量
    【转】一致性hash算法(consistent hashing)
    【转】五笔的字典序编码与解码
    给定一个函数rand()能产生0到n-1之间的等概率随机数,问如何产生0到m-1之间等概率的随机数?
  • 原文地址:https://www.cnblogs.com/twodog/p/12141187.html
Copyright © 2011-2022 走看看