- Author: General Department
- Blog: http://woquanke.com
need
You need to generate a promotional image to share with your circle of friends. This promotional image contains a QR code, with different background images and different texts. For this kind of image generation, we considered using server-side generation, but this would consume server performance, so we finally decided to use local generation.
First of all, the applet has a limitation, the package cannot be larger than 2m, and we may have multiple background images, so we plan to put the background image and the QR code image on the server side, which can reduce the size of the applet package and switch the background flexibly. picture.
When drawing a shared picture, you can directly use the Internet address, but there is a problem that may not be able to generate a picture, so we need to download the picture file.
The method of downloading files WeChat has an API, but it returns the temporary path of the file, which can only be used normally during the current startup of the applet. If you want to save it persistently, you need to actively call wx. get access.
So we first encapsulate the download file and save file
Package download and save as a file
This method is simpler
Parameters: an object containing
- id needs the id of the downloaded file. If you don't pass it, the default is to download the url. The reason why id is needed is because we want to download multiple files, and it can be distinguished that the downloaded file is a single file.
- url The network address of the downloaded file (requires WeChat applet background configuration, please refer to WeChat official documentation for specific configuration methods)
- success The return parameter of the success callback is an object containing
id,savedFilePath - fail Fail callback, download failure, save are all failed
/**
* 下载保存一个文件
*/
function downloadSaveFile(obj) {
let that = this;
let success = obj.success;
let fail = obj.fail;
let id = "";
let url = obj.url;
if (obj.id){
id = obj.id;
}else{
id = url;
}
// console.info("%s 开始下载。。。", obj.url);
wx.downloadFile({
url: obj.url,
success: function (res) {
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function (result) {
result.id = id;
if (success) {
success(result);
}
},
fail: function (e) {
console.info("保存一个文件失败");
if (fail) {
fail(e);
}
}
})
},
fail: function (e) {
console.info("下载一个文件失败");
if (fail) {
fail(e);
}
}
})
}
To use the download method (wx.downloadFile(obj)), you need to configure the server domain name in the WeChat applet. Please configure the server domain name in
小程序后台-设置-开发设置-服务器域名. details, please refer to WeChat official documentation
Package multi-file download and save
Download and save multiple files. It is mandatory that all files must be downloaded successfully to return success.
Parameters: an object containing
- urls Array of download addresses, supports multiple url downloads [url1, url2]
- success The download is successful (all files must be downloaded successfully to return a success) Callback parameter map, key(id) -> value ({id,savedFilePath})
- fail The download fails, as long as one method fails, the call fails
/**
* 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
*/
function downloadSaveFiles(obj) {
// console.info("准备下载。。。");
let that = this;
let success = obj.success; //下载成功
let fail = obj.fail; //下载失败
let urls = obj.urls; //下载地址 数组，支持多个 url下载 [url1,url2]
let savedFilePaths = new Map();
let urlsLength = urls.length; // 有几个url需要下载
for (let i = 0; i < urlsLength; i++) {
downloadSaveFile({
url: urls[i],
success: function (res) {
//console.dir(res);
//一个文件下载保存成功
let savedFilePath = res.savedFilePath;
savedFilePaths.set(res.id, res);
console.info("savedFilePath:%s", savedFilePath);
if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
if (success){
success(savedFilePaths)
}
}
},
fail: function (e) {
console.info("下载失败");
if (fail) {
fail(e);
}
}
})
}
}
complete download.jsfile
/**
* 下载管理器
* Created by 全科 on 2018/1/27.
*/
/**
* 下载保存一个文件
*/
function downloadSaveFile(obj) {
let that = this;
let success = obj.success;
let fail = obj.fail;
let id = "";
let url = obj.url;
if (obj.id){
id = obj.id;
}else{
id = url;
}
// console.info("%s 开始下载。。。", obj.url);
wx.downloadFile({
url: obj.url,
success: function (res) {
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function (result) {
result.id = id;
if (success) {
success(result);
}
},
fail: function (e) {
console.info("保存一个文件失败");
if (fail) {
fail(e);
}
}
})
},
fail: function (e) {
console.info("下载一个文件失败");
if (fail) {
fail(e);
}
}
})
}
/**
* 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
*/
function downloadSaveFiles(obj) {
// console.info("准备下载。。。");
let that = this;
let success = obj.success; //下载成功
let fail = obj.fail; //下载失败
let urls = obj.urls; //下载地址 数组，支持多个 url下载 [url1,url2]
let savedFilePaths = new Map();
let urlsLength = urls.length; // 有几个url需要下载
for (let i = 0; i < urlsLength; i++) {
downloadSaveFile({
url: urls[i],
success: function (res) {
console.dir(res);
//一个文件下载保存成功
let savedFilePath = res.savedFilePath;
savedFilePaths.set(res.id, res);
console.info("savedFilePath:%s", savedFilePath);
if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
if (success){
success(savedFilePaths)
}
}
},
fail: function (e) {
console.info("下载失败");
if (fail) {
fail(e);
}
}
})
}
}
module.exports = {
downloadSaveFiles: downloadSaveFiles
}
use
import first
import download from "download.js"
call after
let url1 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
let url2 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/26/eyJwaWMiOiIxNTE2OTcyNDg0NDUzOSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
download.downloadSaveFiles({
urls: [url1, url2],
success: function (res) {
// console.dir(res);
console.info(res.get(url2).savedFilePath)
},
fail: function (e) {
console.info("下载失败");
}
);