開始實現(xiàn)之前先上個效果圖
tips
1.網(wǎng)絡圖片需先配置download域名，可通過wx.getImageInfo轉(zhuǎn)為臨時路徑；
2.個人習慣問題，我習慣使用async-await語法，所以需要引入regenerator這個庫，使用方式可網(wǎng)上查。
一、封裝通用微信api返回為Promise對象
/datas/common.js
// 封裝獲取微信圖片信息。
export const getWxImageInfo = (imgPath) => {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: imgPath,
success: res => {
resolve(res)
},
fail: res => {
reject(res)
}
})
})
}
// 封裝獲取節(jié)點選擇器信息
export const getSelectQurey = (queryStr) => {
return new Promise(resolve => {
var query = wx.createSelectorQuery();
query.select(queryStr).boundingClientRect();
query.exec(res => {
resolve(res)
})
})
}
// 封裝把畫布導出生成指定大小的圖片
export const canvasToTempFilePath = (width, height, canvasId, fileType = 'jpg') => {
return new Promise((resolve, reject) => {
wx.canvasToTempFilePath({
width,
height,
canvasId,
fileType,
success: res => {
resolve(res)
},
fail: res => {
reject(res)
}
})
})
}
// 封裝保存圖片到系統(tǒng)相冊
export const saveImageToPhotosAlbum = (filePath) => {
return new Promise((resolve, reject) => {
wx.saveImageToPhotosAlbum({
filePath,
success: res => {
resolve(res)
},
fail: res => {
reject(res)
}
})
})
}
二、視圖的實現(xiàn)
.wxml
<view class="icon-download" catchtap="getCanvas">點擊生成圖片</view>
<!-- 二維碼大圖 -->
<view class='shade' wx:if="{{isShowCanvas}}">
<view class='qr-code'>
<canvas class='qr-canvas' canvas-id="qrCanvas" id="qrCanvas"></canvas>
<view class='qr-btn'>
<view class='qr-btn-save' catchtap='saveImageToPhotosAlbumFunc'>保存圖片,分享到朋友圈</view>
<view class='qr-btn-cancel' catchtap='hideCanvas'>取消</view>
</view>
</view>
</view>
<!-- 二維碼大圖.end -->
.wxss
/* 查看大圖 */
.shade {
width: 100%;
height: 100%;
background-color: rgba(240, 235, 235, 0.5);
position: fixed;
z-index: 100;
top: 0;
left: 0;
}
.qr-code {
width: 600rpx;
height: 1000rpx;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* margin: 30rpx auto; */
}
.qr-canvas {
display: block;
background-color: #fff;
margin: 0 auto;
width: 600rpx;
height: 900rpx;
}
.qr-btn {
width: 600rpx;
height: 100rpx;
line-height: 100rpx;
margin: 0 auto;
font-size: 28rpx;
color: #fff;
display: flex;
background-color: #658dc5;
}
.qr-btn-save {
flex: 0 0 500rpx;
text-align: center;
border-right: 1rpx solid #fff;
}
.qr-btn-cancel {
text-align: center;
flex: 0 0 100rpx;
}
三、創(chuàng)建canvas并保存到系統(tǒng)相冊
tips
商品圖是正方形的，所以這里商品圖的寬高都用canvas的寬文字不能換行，這里只是簡單的處理了一下
注意: wx.canvasToTempFilePath(Object object, Object this) 這個的使用，文檔有一句話需要注意的：“把當前畫布指定區(qū)域的內(nèi)容導出生成指定大小的圖片。在 draw() 回調(diào)里調(diào)用該方法才能保證圖片導出成功。”
const app = getApp()
const regeneratorRuntime = app.globalData.regeneratorRuntimeconst
const util = require('../../utils/util.js')
import {
getSelectQurey,
getWxImageInfo,
canvasToTempFilePath,
saveImageToPhotosAlbum
} from '../../datas/common.js'
Page({
data: {
isShowCanvas: false, // 是否顯示canvas
wxaCode: 'https://xxx..jpg', // 商品小程序碼
goodsImageUrl: 'https://xxx..jpg', // 商品圖片
canvasTempFilePath: '', // canvas導出生成圖片的臨時路徑
},
// 點擊顯示要生成的canvas
getCanvas(e) {
if (!this.data.wxaCode) {
util.showToast('二維碼生成失敗');
return;
}
this.setData({
isShowCanvas: true
}, () => {
this.createCanvas();
})
},
// 隱藏canvas
hideCanvas() {
this.setData({
isShowCanvas: false
})
},
// 創(chuàng)建canvas
async createCanvas() {
wx.showLoading({
title: '圖片生成中...'
})
const _this = this
// 創(chuàng)建節(jié)點選擇器
const res = await getSelectQurey('#qrCanvas');
// canvas的寬高
const cvWidth = res[0].width;
const cvHeight = res[0].height;
const cvSubValue = cvHeight - cvWidth
const qrWidth = cvSubValue / 1.5
const qrMargin = (cvSubValue - qrWidth) / 2
const qrX = cvWidth - qrWidth - qrMargin / 2
const qrY = cvWidth + qrMargin
const shopNameY = cvWidth + cvSubValue - qrWidth
// 二維碼網(wǎng)絡圖片轉(zhuǎn)臨時路徑
let qrImagePath = '';
try {
const wxaCode = _this.data.wxaCode;
const qrImage = await getWxImageInfo(wxaCode);
qrImagePath = qrImage.path
} catch (e) {
wx.hideLoading();
this.hideCanvas();
util.showToast('二維碼生成失敗');
return;
}
// 商品網(wǎng)絡圖片轉(zhuǎn)臨時路徑
let goodsImagePath = '/images/default_goods.png';
const goodsImage = _this.data.goodsImageUrl;
if (goodsImage) {
const goodsImageRes = await getWxImageInfo(goodsImage);
goodsImagePath = goodsImageRes.path;
}
// 創(chuàng)建canvas
var ctx = wx.createCanvasContext('qrCanvas', _this);
// 設置背景
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, cvWidth, cvHeight);
// 設置商品圖片 商品圖寬高是一樣的
ctx.drawImage(goodsImagePath, 0, 0, cvWidth, cvWidth);
// 設置二維碼圖片
ctx.drawImage(qrImagePath, qrX, qrY, qrWidth, qrWidth);
// 設置店鋪名稱
const shopName = '我是店鋪名稱';
ctx.setFillStyle('black')
ctx.setFontSize(16)
ctx.setTextAlign('left')
ctx.fillText(shopName, 10, shopNameY, cvWidth - qrWidth);
// 設置商品名稱 文字不能換行，這里只是簡單的處理了一下
const goodsName = '一個名字很長很長的商品就問你怕不怕';
let goodsName1 = '';
let goodsName2 = '';
ctx.setFillStyle('black')
ctx.setFontSize(14)
ctx.setTextAlign('left')
if (goodsName.length <= 10) {
ctx.fillText(goodsName, 10, shopNameY + 30, cvWidth - qrWidth);
} else
if (goodsName.length > 10 && goodsName.length <= 22) {
goodsName1 = goodsName.substring(0, 10);
goodsName2 = goodsName.substring(10);
ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth);
ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth);
} else {
goodsName1 = goodsName.substring(0, 10);
goodsName2 = goodsName.substring(10, 22) + '...';
ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth);
ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth);
}
// 設置提示
const tipText = '長按識別小程序，馬上下單！';
ctx.setFillStyle('gray')
ctx.setFontSize(8)
ctx.setTextAlign('center')
ctx.fillText(tipText, cvWidth / 2, cvHeight - 10);
// 完成
ctx.draw(false, () => {
wx.hideLoading();
_this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas')
});
},
// 把當前畫布指定區(qū)域的內(nèi)容導出生成指定大小的圖片
async canvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) {
try {
let res = await canvasToTempFilePath(cvWidth, cvHeight, qrCanvas);
this.setData({
canvasTempFilePath: res.tempFilePath
});
} catch (error) {
console.log(error);
util.showToast(error.errMsg);
}
},
// 保存圖片到本地
async saveImageToPhotosAlbumFunc() {
try {
let res = await saveImageToPhotosAlbum(this.data.canvasTempFilePath);
console.log(res);
this.hideCanvas();
util.showToast('圖片保存成功');
} catch (err) {
console.log(err);
}
}
})
寫得比較簡單，因為主要是方便自己做記錄的，所以也沒有考慮到過多的使用場景。
總結(jié)
以上所述是小編給大家介紹的微信小程序之html5 canvas繪圖并保存到系統(tǒng)相冊，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
