【微信小程序】＜image＞图片

目录

wx.canvasToTempFilePath 元素保存图片

wx.chooseImage 选择图片

wx.getImageInfo() 获取图片信息

wx.previewimage 预览图片

预览结束返回后触发onshow

---

wx.canvasToTempFilePath 元素保存图片

没有view,image,text等标签直接生成图片的api，但有将canvas直接生成图片的api。

wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
  }
})

wx.chooseImage 选择图片

chooseimage: function () {  
    var that = this;  
    wx.chooseImage({  
        count: 1, // 默认9  
        sizeType: ['original', 'compressed'], // 原图或压缩图，默认都有  
        sourceType: ['album', 'camera'], // 来源相册或相机，默认都有  
        success: function (res) {  
            // 选定照片本地文件路径列表，作为img的src属性显示图片  
            that.setData({  
               tempFilePaths:res.tempFilePaths  
            }) 
        }  
    })  
}

wx.getImageInfo() 获取图片信息

var app = getApp()  
Page({
    data: {  
        tempFilePaths: '../uploads/foods.jpg',
        imgwidth:0,
        imgheight:0, 
    },
    onReady:function(){
        // 页面渲染完成  
        var that = this;  
        wx.getImageInfo({
            src: that.data.tempFilePaths,
            success: function (res) {
                that.setData({
                   imgwidth:res.width,
                   imgheight:res.height,
            })
        }
    }  
})

wx.previewimage 预览图片

previewImg: function(e) {
    bol = true;
    wx.previewImage({
        urls: [e.currentTarget.dataset.url]
    });
}

预览结束返回后触发onshow

data：{
      bol：false
},
onShow() {
    if (bol) { 
        // 预览结束跳到这里
        bol = false;
        return;
    } else {
        // 正常走onshow方法
        this.previewImg();
    }
},