微信小程序实现的图片保存功能示例

2024-10-30 09:43:22

本文实例讲述了微信小程序实现的图片保存功能。分享给大家供大家参考，具体如下：

微信小程序保存图片分为两步：

1.下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

即：调用函数wx.downloadFile({})

2.保存图片到系统相册。

即：调用函数wx.saveImageToPhotosAlbum({})

具体代码如下：

.wxml

<button data-image='{{图片路径}}' bindtap="saveImage" >保存图片</button>

.js

saveImage: function (e) {
     wx.downloadFile({
      url: 服务器Http请求 +图片路径,
       success: function (res) {
          var imageFilePath = res.tempFilePath;
             if (!util.isNull(imageFilePath)) {
              wx.saveImageToPhotosAlbum({
              filePath: imageFilePath,
              success: function (data) {
              wx.showToast({
              title: "保存成功",
              })
            }, fail: function (res) {
           wx.showToast({
          title: "保存失败",
         })
        }
      })
      }
    },
   })
},

关于wx.downloadFile具体说明还可参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.downloadFile.html

希望本文所述对大家微信小程序开发有所帮助。

微信小程序图片选择、上传到服务器、预览（PHP）实现实例

微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo
微信小程序实现图片上传、删除和预览功能的方法

本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i
微信小程序上传图片到服务器实例代码

上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <
微信小程序动态的设置图片的高度和宽度详解及实例代码

微信小程序图片等比例缩放动态的获取图片的高度和宽度动态的设置图片的高度和宽度前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具
在微信小程序中保存网络图片

微信代码片段点这里, 该功能需要添加appid才能进行正常的测试. 在小程序的文档中我们得知,wx.saveImageToPhotosAlbum是用来保存图片到相册的. 但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口.. 因此先需要把该文件下载至本地,使用 wx.downloadFile . 但值得注意的是小程序只可以跟指定的域名与进行网络通信,也就是说下载图片之前,我们需要先去微信公众者平台的开发设置里设置u
微信小程序实现图片放大预览功能

需求:当点击图片时,当前图片放大预览,且可以左右滑动实现方式:使用微信小程序图片预览接口我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码:  <view wx:if="{{item.pictures}}" class="list-dImg"> <image bindtap="imgYu" data-list="{{item
微信小程序保存多张图片的实现方法

前言使用promise 队列,保存多张图片到手机相册问题:有些手机会出现只能保存五张图片,报错信息:无法写入 promise需要好好学习核心代码 // pages/saveImgs/index.js import { writePhotosAlbum } from '../../utils/util' Page({ /** * 页面的初始数据 */ data: { list: [ 'https://timgs.top1buyer.com/admin/special/special_img_
微信小程序图片选择区域裁剪实现方法

本文介绍了微信小程序图片选择区域屏裁剪实现方法,分享给大家.具体如下: 效果图 HTML代码 <view class="index_all_box"> <view class="imgCut_header"> <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view> <view class="imgCut_header_
微信小程序通过保存图片分享到朋友圈功能

说明首先说明一点,小程序内是不能直接分享到朋友圈的.所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈.然后可以通过在小程序中识别二维码来进入小程序的指定页面.参考市面上支持分享的应用,基本都是这种实现方式. 准备阶段 1.通过服务器获取小程序码这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码.然后调用wx.getImageInfo将后台生成的小程序码保存起来. 注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不
微信小程序-拍照或选择图片并上传文件

微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose
微信小程序实现保存图片到相册功能

项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题.废话不多说,直接上干货... 功能逻辑: 先检查用户请求过的权限中是否允许"保存到相册"权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权. 上代码: <view bindtap='save'>保存图片到相册</view> //点击保存图片 save () { let

微信小程序实现的图片保存功能示例

相关推荐

随机推荐