• 微信小程序把玩(三十二)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')
                   }
          })
      }
    
    
    })
  • 相关阅读:
    用js实现广告图片后加载
    Sql server存储过程和C#分页类简化你的代码
    SQL Server 1069 错误(由于登录失败而无法启动服务)解决方法
    ASP.NET编程中的十大技巧
    ASP.NET通用分页程序
    asp.net中使用SPLIT这个函数把一个字符串分成数组
    win2003+iis6服务器设置问题集
    一个较优雅的GridView隐藏列取值解决方案
    ACCESS的iif语句转到SQL语句!!!
    SCOPE_IDENTITY 和 @@IDENTITY
  • 原文地址:https://www.cnblogs.com/twodog/p/12141187.html
Copyright © 2020-2023  润新知