一直沒有怎么使用過canvas，小程序也是之前看過一個視頻而已规辱，想要找個例子結(jié)合一下兩者肥橙。所以一個小小的保存圖片作為朋友圈相冊封面的demo就這么出現(xiàn)了，在這里主要記錄一下自己遇到的一些問題以及解決的辦法鹃骂。
截圖：
效果圖/制作頁面/顏色選擇
主要是以下幾個問題：
1.顏色選擇器
2.頁面通信
3.組件間通信
4.canvas（生成圖片台盯、預(yù)覽/保存、文字換行）
1.顏色選擇器
從小程序的文檔中沒有找到相應(yīng)的顏色選擇組件偎漫，昨天（18.3.13）小程序插件功能上線了爷恳，小伙伴們也可以選擇插件有缆。寫這個demo是在前兩天寫的象踊，所以自己就實現(xiàn)了一個簡單的顏色選擇。
鑒于組件的復(fù)用棚壁，而目前小程序的自定義組件只能擁有自己的wxml 模版和 wxss 樣式杯矩，js的處理還是需要在引用組件的父組件中處理，所以換了一種方式實現(xiàn)顏色的選擇：跳到新頁面中選擇袖外。
備注：使用數(shù)據(jù)緩存（setStorageSync）史隆，以免一些數(shù)據(jù)被重新初始化
/* 選擇顏色
ob: 對象
value：顏色值 */
changeColor: function(e) {
var value = e.target.dataset.value;
if (this.data.ob && value) {
wx.setStorageSync(this.data.ob, value);
wx.navigateTo({
url: '/pages/wallpaper/wallpaper',
});
}
},
2.頁面通信
數(shù)據(jù)緩存
navigateTo-url參數(shù)
3.組件間通信（data）
<template is="msgItem" data="{{...item}}"/> // 展開
<template is="msgItem" data="{{item}}"/>
4.canvas（生成圖片、預(yù)覽/保存曼验、文字換行）
// 生成圖片
drawPicture: function(val) {
const that = this;
const btnName = val.currentTarget.dataset.btnName;
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
if (btnName === 'preview') {
that.preview(res.tempFilePath);
} else if (btnName === 'save') {
that.save(res.tempFilePath);
}
},
fail: function (err) {
console.log(err);
}
})
},
- 預(yù)覽/保存圖片
// 預(yù)覽
preview: function(val) {
if(val) {
wx.previewImage({
urls: [val] // 需要預(yù)覽的圖片http鏈接列表
})
}
},
// 保存
save: function(val) {
if(val) {
wx.saveImageToPhotosAlbum({
filePath: val,
success: function (res) {
console.log('成功');
},
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('獲取權(quán)限成功泌射，給出再次點擊圖片保存到相冊的提示。')
} else {
console.log('獲取權(quán)限失敗鬓照，給出不給權(quán)限就無法正常使用的提示')
}
}
})
}
}
});
}
},
// 裁減-換行(measureText)
var lastSubStrIndex = 0;
var dTextWidth = 0;
var lineHeight = 20; // 行高
var initX = 10; // 起始X坐標(biāo)
var initY = canvasHeight / 2; // 起始Y坐標(biāo)
for(var i = 0; i < dText.length; i++) {
dTextWidth += ctx.measureText(dText[i]).width;
if (dTextWidth > canvasWidth - initX) {
ctx.fillText(dText.substring(lastSubStrIndex, i), initX, initY);
initY += lineHeight;
dTextWidth = 0;
lastSubStrIndex = i;
}
if (i == dText.length-1) {
ctx.fillText(dText.substring(lastSubStrIndex, i + 1), initX, initY);
}
}
