微信小程式 點選生成朋友圈分享圖
阿新 • • 發佈：2019-02-15
//share.js
Page({
data: {
imagePath: "/images/shareimg_bg.jpg",
imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
imageEwm: "/images/ewm.jpg",
maskHidden: true,
},
onLoad: function (options) {
// 頁面初始化 options為頁面跳轉所帶來的引數
var size = this.setCanvasSize();//動態設定畫布大小
// this.createNewImg();
//建立初始化圖片
},
//適配不同螢幕大小的canvas 生成的分享圖寬高分別是 750 和940，老實講不知道這塊到底需不需要，然而。。還是放了，因為不寫這塊的話，模擬器上的圖片大小是不對的。。。
setCanvasSize: function () {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750;//畫布寬度
var scaleH = 940 / 750;//生成圖片的寬高比例
var width = res.windowWidth;//畫布寬度
var height = res.windowWidth * scaleH;//畫布的高度
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("獲取裝置資訊失敗" + e);
}
return size;
},
//將1繪製到canvas的固定
settextFir: function (context) {
let that=this;
var size = that.setCanvasSize();
var textFir = "發了一個紅包";
console.log(textFir);
context.setFontSize(24);
context.setTextAlign("center");
context.setFillStyle("#fee6b5");
context.fillText(textFir, size.w / 2, size.h * 0.25);
context.stroke();
},
//將2繪製到canvas的固定
settextSec: function (context) {
let that = this;
var size = that.setCanvasSize();
var textSec = "長按識別小程式，領獎金";
context.setFontSize(14);
context.setTextAlign("center");
context.setFillStyle("#fee6b5");
context.fillText(textSec, size.w / 2, size.h * 0.88);
context.stroke();
},
//將canvas轉換為圖片儲存到本地，然後將圖片路徑傳給image圖片的src
createNewImg: function () {
var that = this;
var size = that.setCanvasSize();
var context = wx.createCanvasContext('myCanvas');
var path = "/images/shareimg_bg.jpg";
var imageTx = that.data.imageTx;
var imageEwm = that.data.imageEwm;
var imageZw = "/images/xcxewm.png";
context.drawImage(path, 0, 0, size.w, size.h);
context.drawImage(imageTx, size.w / 2 - 25, size.h * 0.02, size.w * 0.14, size.w * 0.14);
context.drawImage(imageEwm, size.w / 2 - 60, size.h * 0.32, size.w * 0.33, size.w * 0.33);
context.drawImage(imageZw, size.w / 2 - 25, size.h * 0.7, size.w * 0.14, size.w * 0.14);
this.settextFir(context);
this.settextSec(context);
console.log(size.w, size.h)
//繪製圖片
context.draw();
//將生成好的圖片儲存到本地，需要延遲一會，繪製期間耗時
wx.showToast({
title: '生成中...',
icon: 'loading',
duration: 2000
});
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({
imagePath: tempFilePath,
canvasHidden: false,
maskHidden: true,
});
//將生成的圖片放入到《image》標籤裡
var img = that.data.imagePath;
wx.previewImage({
current: img, // 當前顯示圖片的http連結
urls: [img] // 需要預覽的圖片http連結列表
})
},
fail: function (res) {
console.log(res);
}
});
}, 2000);
},
})
Page({
data: {
imagePath: "/images/shareimg_bg.jpg",
imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
imageEwm: "/images/ewm.jpg",
maskHidden: true,
},
onLoad: function (options) {
// 頁面初始化 options為頁面跳轉所帶來的引數
var size = this.setCanvasSize();//動態設定畫布大小
// this.createNewImg();
//建立初始化圖片
},
//適配不同螢幕大小的canvas 生成的分享圖寬高分別是 750 和940，老實講不知道這塊到底需不需要，然而。。還是放了，因為不寫這塊的話，模擬器上的圖片大小是不對的。。。
setCanvasSize: function () {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750;//畫布寬度
var scaleH = 940 / 750;//生成圖片的寬高比例
var width = res.windowWidth;//畫布寬度
var height = res.windowWidth * scaleH;//畫布的高度
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("獲取裝置資訊失敗" + e);
}
return size;
},
//將1繪製到canvas的固定
settextFir: function (context) {
let that=this;
var size = that.setCanvasSize();
var textFir = "發了一個紅包";
console.log(textFir);
context.setFontSize(24);
context.setTextAlign("center");
context.setFillStyle("#fee6b5");
context.fillText(textFir, size.w / 2, size.h * 0.25);
context.stroke();
},
//將2繪製到canvas的固定
settextSec: function (context) {
let that = this;
var size = that.setCanvasSize();
var textSec = "長按識別小程式，領獎金";
context.setFontSize(14);
context.setTextAlign("center");
context.setFillStyle("#fee6b5");
context.fillText(textSec, size.w / 2, size.h * 0.88);
context.stroke();
},
//將canvas轉換為圖片儲存到本地，然後將圖片路徑傳給image圖片的src
createNewImg: function () {
var that = this;
var size = that.setCanvasSize();
var context = wx.createCanvasContext('myCanvas');
var path = "/images/shareimg_bg.jpg";
var imageTx = that.data.imageTx;
var imageEwm = that.data.imageEwm;
var imageZw = "/images/xcxewm.png";
context.drawImage(path, 0, 0, size.w, size.h);
context.drawImage(imageTx, size.w / 2 - 25, size.h * 0.02, size.w * 0.14, size.w * 0.14);
context.drawImage(imageEwm, size.w / 2 - 60, size.h * 0.32, size.w * 0.33, size.w * 0.33);
context.drawImage(imageZw, size.w / 2 - 25, size.h * 0.7, size.w * 0.14, size.w * 0.14);
this.settextFir(context);
this.settextSec(context);
console.log(size.w, size.h)
//繪製圖片
context.draw();
//將生成好的圖片儲存到本地，需要延遲一會，繪製期間耗時
wx.showToast({
title: '生成中...',
icon: 'loading',
duration: 2000
});
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({
imagePath: tempFilePath,
canvasHidden: false,
maskHidden: true,
});
//將生成的圖片放入到《image》標籤裡
var img = that.data.imagePath;
wx.previewImage({
current: img, // 當前顯示圖片的http連結
urls: [img] // 需要預覽的圖片http連結列表
})
},
fail: function (res) {
console.log(res);
}
});
}, 2000);
},
})