WeChat applet realizes taking photos and selecting pictures from albums

WeChat applet realizes taking photos and selecting pictures from albums

This article shares the specific code for WeChat applet to realize taking photos and selecting pictures from albums for your reference. The specific content is as follows

layout:

<!--pages/camera/camera.wxml-->
<view 
class="tui-menu-list" 
id="view1" 
style="display:flex;flex-direction:space-between">
 <button 
  id="b1" 
  size="mini"
  type="primary" 
  bindtap="chooseimage">
  Get image</button>
 <button 
  id="b2" 
  size="mini"
  type="primary"
  bindtap="savePhone">
  Save</button>
</view>
<image
  src="{{tempFilePaths}}" 
  catchtap="chooseImageTap"
  mode="aspectFit" 
  style="width:100%;height:400px;background-color:#ffffff;">
</image>

style:

/* pages/camera/camera.wxss */
 
.view1 {
  height: 25px
}
 
.tui-menu-list {
  display: flex;
  flex-direction: row;
  margin: 20rpx;
  padding: 20rpx;
}

Get the image path, display the image and save it

// pages/camera/camera.js
Page({
 
  data: {
    tempFilePaths: 'http://pic2.cxtuku.com/00/01/08/b207004f7104.jpg'
  },
  chooseimage: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['Select from album', 'Take photo'],
      itemColor: "#CED63A",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },
 
  chooseWxImage: function (type) {
    var that = this
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      count: 1,
      success: function (res) {
        console.log(res)
        that.setData({
          tempFilePaths: res.tempFilePaths[0],
        })
      }
    })
  },
  savePhone: function () {
    wx.getImageInfo({
      src: this.data.tempFilePaths,
      success: function (res) {
        var path = res.path
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: function () {
            wx.showToast({
              title: 'Save successfully',
            })
          },
          fail: function (res) {
            wx.showToast({
              title: 'Save failed',
              icon: 'none'
            })
          }
        })
      }
    })
  }
})

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet uses the front camera to take photos
  • WeChat applet takes a photo or selects a picture from the album to upload code example
  • WeChat applet realizes the generation of pictures in the specified area of ​​the camera canvas
  • Example of how to implement the photo and video functions of WeChat mini program
  • How to use the WeChat applet chooseImage (select an image from the local album or take a photo using the camera)
  • WeChat applet calls the camera's hidden photo taking function
  • WeChat applet implements countdown to call the camera to automatically take pictures
  • WeChat applet chooseImage selects an image or takes a photo
  • WeChat Mini Program - Take a photo or select an image and upload a file
  • WeChat applet realizes the photo taking function

<<:  How to customize at and cron scheduled tasks in Linux

>>:  Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection

Recommend

How to generate Vue user interface by dragging and dropping

Table of contents Preface 1. Technical Principle ...

Understanding of CSS selector weight (personal test)

Copy code The code is as follows: <style type=...

Let's talk in depth about the principle and implementation of new in JS

Table of contents definition Constructor bodies a...

Drawing fireworks effect of 2021 based on JS with source code download

This work uses the knowledge of front-end develop...

How to use js to communicate between two html windows

Scenario: When page A opens page B, after operati...

MySQL common backup commands and shell backup scripts sharing

To back up multiple databases, you can use the fo...

Detailed steps to install MySQL 8.0.27 in Linux 7.6 binary

Table of contents 1. Environmental Preparation 1....

How to handle concurrent updates of MySQL data

Will UPDATE lock? Will the SQL statement be locke...

JavaScript design pattern learning proxy pattern

Table of contents Overview Implementation Protect...

Detailed explanation of NodeJS modularity

Table of contents 1. Introduction 2. Main text 2....

How to View All Running Processes in Linux

You can use the ps command. It can display releva...

Solve the group by query problem after upgrading Mysql to 5.7

Find the problem After upgrading MySQL to MySQL 5...

TimePicker in element disables part of the time (disabled to minutes)

The project requirements are: select date and tim...