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

MySQL 5.7.21 Installer Installation Graphic Tutorial under Windows 10

Install MySQL and keep a note. I don’t know if it...

Detailed explanation of firewall rule settings and commands (whitelist settings)

1. Set firewall rules Example 1: Expose port 8080...

Linux Basic Tutorial: Special Permissions SUID, SGID and SBIT

Preface For file or directory permissions in Linu...

How to implement Linux deepin to delete redundant kernels

The previous article wrote about how to manually ...

Rendering Function & JSX Details

Table of contents 1. Basics 2. Nodes, trees, and ...

JavaScript Advanced Programming: Variables and Scope

Table of contents 1. Original value and reference...

Ubuntu 19.04 installation tutorial (picture and text steps)

1. Preparation 1.1 Download and install VMware 15...

Detailed process of deploying Docker to WSL2 in IDEA

The local environment is Windows 10 + WSL2 (Ubunt...

Vue-Router installation process and principle detailed

Table of contents 1. Front-end routing implementa...

How to implement vertical text alignment with CSS (Summary)

The default arrangement of text in HTML is horizo...

CSS3 overflow property explained

1. Overflow Overflow is overflow (container). Whe...

Docker dynamically exposes ports to containers

View the IP address of the Container docker inspe...

Detailed tutorial for upgrading zabbix monitoring 4.4 to 5.0

1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...

CentOS8 - bash: garbled characters and solutions

This situation usually occurs because the Chinese...

Detailed explanation of how a SQL statement is executed in MySQL

Overview I have recently started learning MySQL r...