微信小程序&PHP 生成小程序码分享图 并保存在手机相册

注意：小程序端如果想保存成图片，需要用画布，但是如果想把图片放在画布上，真机上需要先把图片保存到本地。
解决方法：使用缓存文件！！！！！

小程序端：

.js 小程序前端数据处理

import util from '../../../utils/util' //下文贴出，公共方法
var image = require('../../../utils/util.js'); 
//获取全局变量
const app = getApp(); 
Page({
  data: {
    
    allthing: app.globalData,
  },
  onLoad: function (options) {
    var that = this;
    var imageSize = image.image()
 
    that.setData({
      imageWidth: imageSize.imageWidth,
      imageHeight: imageSize.imageHeight,
      chaWidth: imageSize.chaWidth,
      chaHeight: imageSize.chaHeight,
    })
 
    //获取头像
    that.getAvatarUrl(that.data.allthing.userInfo.avatarUrl)
 
    //获取特定页面的小程序码
    that.getSpecialM()
 
    //获取背景图
    that.getBackground()
 
    //获取头像框
    that.getTouground()
 
    wx.showToast({
      title: '正在生成图片',
      icon: 'loading',
      duration: 10000,
    })
    
    //延迟执行，避免请求文件无效
    setTimeout(function () {           
      console.log("----Countdown----")
        //生成图片
      that.createImg()
      wx.hideToast()
    }, 1000)
  },
 
  /**
   * 获取特定页面的小程序码
   */
  getSpecialM:function(){
    var that = this
    //请求获取小程序码
    wx.request({
      method: 'GET',
      url: 'https://www.a******_code.php?sid=' + that.data.userInfo.subject_id,
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.downloadFile({
          url: res.data.data.url,
          success: function (res) {
            that.setData({
              icon4: res.tempFilePath,
            })
          },
          fail: function () {
            console.log('fail')
          }
        })
      }
  })
},
 
  /**
   * 获取头像
   */
  getAvatarUrl: function (avatarUrl){
    var that = this
    //保存头像
    wx.downloadFile({
      url:avatarUrl,
      success: function (res) {
        that.setData({
          exam: res.tempFilePath,
        })
      },
      fail: function () {
        console.log('fail')
      }
    })
  },
 
  /**
   * 获取背景
   */
  getBackground: function () {
    var that = this
    wx.downloadFile({
      url: 'https://app.c***answer/2.png',
      success: function (res) {
        that.setData({
          share: res.tempFilePath,
        })
      },
      fail: function () {
        console.log('fail')
      }
    })
  },
 
  /**
   * 获取头像框
   */
  getTouground: function () {
    var that = this
    wx.downloadFile({
      url: 'https://app.ci1*******er/phot.png',
      success: function (res) {
        that.setData({
          phot: res.tempFilePath,
        })
      },
      fail: function () {
        console.log('fail')
      }
    })
  },
 
  /**
   * 生成画布
   */
  createImg:function(){
    var that  = this 
    var ctx = wx.createCanvasContext('myCanvas');
    ctx.setFillStyle('White')
    ctx.fillRect(0, 0, 300, 400)
    ctx.drawImage(that.data.icon4, 115 + that.data.chaWidth / 2, 153 + that.data.chaHeight / 2, 92, 92)
    ctx.drawImage(that.data.share, 0, 0, that.data.imageWidth, that.data.imageHeight)
    ctx.drawImage(that.data.exam, 138 + that.data.chaWidth / 2, 10 , 50, 50)
    ctx.drawImage(that.data.phot, 138 + that.data.chaWidth / 2, 10, 50, 50)
    ctx.draw();
  },
 
    //保存图片触发事件
  savePic: function () {       
    var that = this
    wx.canvasToTempFilePath({
      width: that.data.imageWidth,
      height: that.data.imageHeight,
      canvasId: 'myCanvas',
      success: function (res) {
        util.savePicToAlbum(res.tempFilePath)
      }
    })
    setTimeout(function () {
      console.log("----Countdown----")
      wx.redirectTo({
        url: '/pages/my/my/my',
      })
    }, 1000)
   
  }
})

.wxml 前端展现形式

<view>  
    <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px" canvas-id="myCanvas" class='canvas'></canvas>  
    <!--测试按钮-->  
    <view class="edit-footer">  
        <button class="button-done" type="primary" bindtap="savePic">保存图片</button>  
    </view>  
</view>

util.js 公用方法

function savePicToAlbum(tempFilePath) {  
  let that = this;  
  wx.getSetting({  
    success(res) {  
      if (!res.authSetting['scope.writePhotosAlbum']) {  
        wx.authorize({  
          scope: 'scope.writePhotosAlbum',  
          success() {  
            wx.saveImageToPhotosAlbum({  
              filePath: tempFilePath,  
              success(res) {  
                wx.showToast({  
                  title: '保存成功'  
                });  
              },  
              fail(res) {  
                console.log(res);  
              }  
            })  
          },  
          fail() {  
            // 用户拒绝授权,打开设置页面  
            wx.openSetting({  
              success: function (data) {  
                console.log("openSetting: success");  
              },  
              fail: function (data) {  
                console.log("openSetting: fail");  
              }  
            });  
          }  
        })  
      } else {  
        wx.saveImageToPhotosAlbum({  
          filePath: tempFilePath,  
          success(res) {  
            wx.showToast({  
              title: '保存成功',  
            });  
          },  
          fail(res) {  
            console.log(res);  
          }  
        })  
      }  
    },  
    fail(res) {  
      console.log(res);  
    }  
  })  
}  
function image() {  
  var imageSize = {};  
  var originalScale = 0.2;//图片高宽比    
  //获取屏幕宽高    
  wx.getSystemInfo({  
    success: function (res) {  
      var windowWidth = res.windowWidth;  
      var windowHeight = res.windowHeight;  
      var windowscale = windowHeight / windowWidth;//屏幕高宽比    
      console.log('windowWidth: ' + windowWidth)  
      console.log('windowHeight: ' + windowHeight)  
      if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比    
        //图片缩放后的宽为屏幕宽    
        imageSize.imageWidth = windowWidth;  
        imageSize.imageHeight = (windowWidth * 400) / 320;  
        imageSize.chaWidth = windowWidth-320;   
        imageSize.chaHeight = (windowWidth * 400) / 320 - 400;   
      } else {//图片高宽比大于屏幕高宽比    
        //图片缩放后的高为屏幕高    
        imageSize.imageHeight = windowHeight;  
        imageSize.imageWidth = (windowHeight * 320) / 400;  
        imageSize.chaWidth = windowWidth - 320;  
        imageSize.chaHeight = (windowWidth * 400) / 320 - 400;   
      }  
  
    }  
  })  
  console.log('缩放后的宽: ' + imageSize.imageWidth)  
  console.log('缩放后的高: ' + imageSize.imageHeight)  
  return imageSize;  
}  
module.exports = {  
  formatTime: formatTime,  
  savePicToAlbum: savePicToAlbum,  
  image:image  
}

服务器端

create_wxa_code.php 发起请求获取页面小程序码并保存到服务器，返回网络地址。

<?php  
include_once('/opt*****/function.php');  
include_once('/opt*****n/config.php');//$appid和$secret保存其中  
$sid = addslashes($_GET['sid']);  
//token存在缓存中  
$access_token=M::Get('q*******en_'.$appid);  
if(!$access_token){  
        $url_access_token = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$secret;  
        $json_access_token = sendCmd($url_access_token,array());  
        //access_token加缓存  
        $arr_access_token = json_decode($json_access_token,true);  
        $access_token = $arr_access_token['access_token'];  
        M::Set('q******ken_'.$appid,$access_token,3600);  
}  
if(!empty($access_token)) {  
    $url = 'https://api.weixin.qq.com/wxa/getwxacode?access_token='.$access_token;      
    $data = '{"path": "/pages/a*****/index?id='.$sid.'", "width":430}';  
        $result = sendCmd($url,$data);  
  
    $dir = "/opt/c******wxaapp/";  
    $path = $dir.date("Y/m/d/")."/".rand(1,50)."/";  
    create_dirs($path,0777);  
    $file_name = time().".png";  
          
    file_put_contents($path.$file_name,$result);  
    $url = 'https://www.q****om/'.str_replace('/op*****baby/','',$path.$file_name);  
  
    $arr = array('ret'=>1,  
        'msg'=>'success',  
        'data'=>array('url'=>$url),   //返回保存在服务器中小程序码的地址  
        );  
} else {  
    $arr = array('ret'=>0,'msg'=>'ACCESS TOKEN为空！');  
}  
    echo json_encode($arr);  
  
  
/** 
 * 发起请求 
 * @param  string $url  请求地址 
 * @param  string $data 请求数据包 
 * @return   string      请求返回数据 
 */  
function sendCmd($url,$data)  
{  
    $curl = curl_init(); // 启动一个CURL会话        
    curl_setopt($curl, CURLOPT_URL, $url); // 要访问的地址                    
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0); // 对认证证书来源的检测      
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2); // 从证书中检查SSL加密算法是否存在        
    curl_setopt($curl, CURLOPT_HTTPHEADER, array('Expect:')); //解决数据包大不能提交       
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); // 使用自动跳转        
    curl_setopt($curl, CURLOPT_AUTOREFERER, 1); // 自动设置Referer        
    curl_setopt($curl, CURLOPT_POST, 1); // 发送一个常规的Post请求        
    curl_setopt($curl, CURLOPT_POSTFIELDS, $data); // Post提交的数据包        
    curl_setopt($curl, CURLOPT_TIMEOUT, 30); // 设置超时限制防止死循       
    curl_setopt($curl, CURLOPT_HEADER, 0); // 显示返回的Header区域内容        
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // 获取的信息以文件流的形式返回   
             
    $tmpInfo = curl_exec($curl); // 执行操作        
    if (curl_errno($curl)) {        
       echo 'Errno'.curl_error($curl);        
    }        
    curl_close($curl); // 关键CURL会话        
    return $tmpInfo; // 返回数据        
}  
?>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,372评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,368评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,415评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,157评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,171评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,125评论 1赞 297
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,028评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,887评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,310评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,411评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,004评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2赞 353

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,070评论 25赞 707
  • 微信小程序学习资料
    转载链接 注：本文转载知乎上的回答 作者：初雪 链接：https://www.zhihu.com/question...
    pengshuangta阅读 28,531评论 9赞 295
  • 独自温暖
    11月24日晚，在浙江省人民大会堂，看了一场经常的话剧演出——《独自温暖》。 全剧主要演员四人，从德国归来的老妇人...
    慢慢慢慢二拍姐阅读 345评论 0赞 0
  • 你的名字
    你的名字，我的心事。 前几天刚刚和朋友一起看过《你的名字》，一阵感动。恰巧进电影院之前天气灰蒙蒙的，出来的时候一片...
    天空吥会掉眼泪阅读 272评论 0赞 0
  • 一些其实2
    每当夜晚，黑暗覆盖我的眼睛 梦想的花蕾随即含苞待放 一幅幅成功 一幕幕风光 都会让我勾起嘴角 理想的生活，不远了吗...
    _秋千qiuqian阅读 180评论 0赞 1