微信小程序&PHP 生成小程序码分享图

admin · 发表于 2022-1-15 17:24:23

注意：小程序端如果想保存成图片，需要用画布，但是如果想把图片放在画布上，真机上需要先把图片保存到本地。

解决方法：使用缓存文件！！！！！

小程序端： .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 发起请求获取页面小程序码并保存到服务器，返回网络地址。