小程序之 将图片保存到手机

x嘻嘻嘻  好久没有写了

因为小程序不能直接分享到朋友圈(我是没找到怎么直接分享过去的方法)、

然后我就想到了一个方法,写一个分享按钮,然后点击后出现一张图,用户保存这张图片到手机上在发朋友圈

虽然这个用户步骤有点繁琐,但是这是我想到的唯一方法了

毕竟脑洞不大啊~

效果图 ??????

好了 言归正传 开始上代码啦

解决方法 ??????

// .wxml  这个是点击分享按钮后出现的页面<view class=‘aa‘ wx:if="{{share}}" >  // wx:if="{{share}}"  这个控制出现页面展示/隐藏
    <image mode=‘widthFix‘ class="sharepicture" src=‘这个地方是图片的地址‘ ></image>  //这个是展示图地址
    <image mode=‘widthFix‘ class="shutdown" src=‘这个是关闭按钮图片的地址‘ bindtap=‘shutdown‘></image>  //这个是关闭按钮
    <view bindtap=‘clickshare‘ class=‘modemeg‘>保存图片</view>  //这个是点击保存图片按钮
</view>
data:{
    share: false,
},
//点击关闭分享
  Shutdown: function(e){
    console.log("E....",e)
    this.setData({
      share: false
    })
  },

  //保存图片按钮
  clickshare: function(){
    var imgSrc = "https://www.liao-shu.com/ptcent_file_upload/emotion/share.png"
    wx.downloadFile({
      url: imgSrc, success: function (res) {
        console.log(res);//图片保存到本地
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath, success: function (data) {
            console.log(data);
          },
          fail: function (err) {
            console.log(err);
            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              wx.openSetting({
                success(settingdata) {
                  console.log(settingdata)
                  if (settingdata.authSetting[‘scope.writePhotosAlbum‘]) {
                    console.log(‘获取权限成功,给出再次点击图片保存到相册的提示。‘)
                  } else {
                    console.log(‘获取权限失败,给出不给权限就无法正常使用的提示‘)
                  }
                }
              })
            }
          }
        })
      }
    })
  }

原文地址:https://www.cnblogs.com/liancat/p/9722274.html

时间: 2024-10-09 18:55:37

小程序之 将图片保存到手机的相关文章

小程序图像处理:图片配色分析

背景 小程序的canvas是微信基于原生组件自行封装的,因此接口跟web的canvas有不少区别,早期更是没有支持像素级的处理能力.在18年初的小程序基础库1.9.0版本更新中,出现了wx.canvasGetImageData和wx.canvasPutImageData两个重要的API,补全了像素处理能力,因此,小程序在客户端进行图片处理成为了可能.具体可以参考:偷偷迭代的重磅功能---小程序的像素处理能力wx.canvasGetImageData 图片配色分析小程序:小色卡 为了尝试小程序的图

[掌眼]IOS UIWebView Long press save image 长按图片保存到手机

具体效果可下载"掌眼"古玩江湖进行测试:http://bbs.guwanch.com ViewController.h @interface ViewController : CDVViewController<UIActionSheetDelegate>{ NSTimer *_timer; // 用于UIWebView保存图片 int _gesState; // 用于UIWebView保存图片 NSString *_imgURL; // 用于UIWebView保存图片 }

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案

转载:请写明原文链接及作者名 '小小小' 小程序真的会取代一切?QQ群:139128168 ← 点击加群 微信小程序中,懒加载特效让人头疼不已,因为小程序完全没法操作dom,所以位置的操作在小程序中,变得极其的难~~ 先看特效: 我们将其拆分为如下几个步骤进行讲解~~ 1)如何获取图片的位置高度 先看一张图: 通过上图可以知道,图片位置高度其实可以通过img.height + margin值算出. js代码: arrHight[i] = Math.floor(i/2)*(img.height +

小程序的image图片显示

最近接触到了一点小程序的东西,跟我们平常的HTML还真不太一样,这里我先大概讲一下图片的显示问题, 小程序的图片用的是<image><image/>标签,他默认的大小是宽300px,高225px.那我们如果用图片的话,肯定不能用默认的大小,那image常用的除了src属性之外,还有一个mode属性,他有4中缩放模式,9种剪裁模式,如果我们想把图片完全显示出来的话,就用 widthFix,宽度不变,高度自动变化,保持原图宽高比不变,下面我有两种方法可以显示完整不被拉伸的图片, 第一种

小程序加载图片失败,默认图片的替换方法

需求前端请求后台的接口的时候回,数据会返回图片的url地址,但是有的时候可能是数据字段的错误,或者是返回的链接中信息是404,那么前端这边怎么处理. 大致思路:我们会在data数据中得到一个list一样的图片数据,或者你可以当成接口返回的数据结构,然后我们循环整个数据的时候会在image标签找不到资源的时候error事件,我们就会得到一个失败实例的方法,然后我们在数据循环的时候可以得到list的index值,也就是索引值.把这个值传到error方法中进行list数据的替换就可以了.怎么样简单吧~

小程序引入背景图片

小程序是无法通过WXSS获取本地资源,既是background-image: url("../../images/bg.png"); 是没有办法显示图片出来的. 解决办法: 一.用网络图片 二.使用base64格式图片 随便在网上找一个在线转换成base64的,把你的图片转换一下就可以直接引入了 三.使用<image/>标签 希望能帮到你,哈哈哈哈 原文地址:https://www.cnblogs.com/mei1234/p/9704181.html

微信小程序——引入背景图片【六】

前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信小程序不支持css里面直接导入本地图片作为背景图呢? 内联式 <view class="img" style="background-image: url(/static/images/draw.png)"></view> 外部引入 如果css是

微信小程序 加载图片时,先拉长,再恢复正常

今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常 我的处理方法是,给他一个初始的height值,或者就直接 height:auto 原文地址:https://www.cnblogs.com/bing0709/p/10729449.html