在做的小程序要增加一個將文字與圖片生成圖片不可修改的功能，第一次做，在網(wǎng)上找了不少資料。參考了wxml-to-canvas | 微信開放文檔? ，又看了一些相關(guān)事例，嘗試寫了一下。
?
需要準備的文件及配置項：
1、先把代碼片段下載到本地
2、創(chuàng)建wxcomponents目錄，把代碼片段中的文件拷到此目錄下，并將下圖的目錄改成真實目錄。
3、修改配置文件pages.json，找到要寫此功能的路徑，加上
"style": {
?? ??? ??? ??? ?"app-plus": {
?? ??? ??? ??? ??? ?"titleNView": false //禁用原生導(dǎo)航欄
?? ??? ??? ??? ?},
?? ??? ??? ??? ?"navigationBarTitleText": "",
?? ??? ??? ??? ?"enablePullDownRefresh": false,
?? ??? ??? ??? ?"navigationStyle": "custom",
?? ??? ??? ??? ?"usingComponents":{
?? ??? ??? ??? ??? ?"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
?? ??? ??? ??? ?}
?? ??? ??? ?}
?
?4、開始寫組件。注意this.widget = this.selectComponent('.widget');一定要放在onLoad頁面生命周期中，不然不生效
?<view :style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
?? ??? ?<wxml-to-canvas class="widget" :width="canvasWidth" :height="canvasHeight"></wxml-to-canvas>
?? ?</view>
const {
?? ??? ?wxml,
?? ??? ?style
?? ?} = require('./notification.js')
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?imgSrc: '/static/img/3.png',
?? ??? ??? ??? ?//最后生成的圖片信息
?? ??? ??? ??? ?imageData: null,
?? ??? ??? ??? ?canvasWidth: 320, // 默認canvas寬高
?? ??? ??? ??? ?canvasHeight: 480,
?? ??? ??? ??? ?screenWidth: null, // 設(shè)備寬度
?? ??? ??? ??? ?screenHeight: null, // 設(shè)備寬度
?? ??? ??? ??? ?userInfo: {},
?? ??? ??? ??? ?isRegister: '',
?? ??? ??? ??? ?controlContent: undefined,
?? ??? ??? ??? ?statusCode: undefined,
?? ??? ??? ??? ?//上個頁面用到的圖片地址
?? ??? ??? ??? ?tempFile:undefined
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onLoad(option) {
?? ??? ??? ?this.userInfo = uni.getStorageSync('weixin-userInfo') ? JSON.parse(uni.getStorageSync('weixin-userInfo')) :{};
?? ??? ??? ?// 獲取設(shè)備信息
?? ??? ??? ?wx.getSystemInfo({
?? ??? ??? ??? ?success: (res) => {
?? ??? ??? ??? ??? ?this.screenWidth = res.screenWidth
?? ??? ??? ??? ??? ?this.screenHeight = 800 //高度建議計算得出或?qū)懰?。如使用res.screenHeight，文字過長時無法生成（安卓手機，最新鴻蒙系統(tǒng)高度不能超過1000）
?? ??? ??? ??? ??? ?this.canvasWidth = this.screenWidth
?? ??? ??? ??? ??? ?this.canvasHeight = this.screenHeight
?? ??? ??? ??? ??? ?setTimeout(() => {
?? ??? ??? ??? ??? ??? ?this.widget = this.selectComponent('.widget');
?? ??? ??? ??? ??? ??? ?this.controlContent = option.controlContent;
?? ??? ??? ??? ??? ??? ?this.tempFile = option.tempFile
?? ??? ??? ??? ??? ??? ?this.download();
?? ??? ??? ??? ??? ?}, 1000)
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?//生成圖片
?? ??? ??? ?download() {
?? ??? ??? ??? ?// 數(shù)字容器寬度 動態(tài)設(shè)置?
?? ??? ??? ??? ?setTimeout(() => {
?? ??? ??? ??? ??? ?uni.showLoading({
?? ??? ??? ??? ??? ??? ?title: '圖片生成中...'
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?this.renderToCanvas()
?? ??? ??? ??? ?}, 1000)
?? ??? ??? ?},
?? ??? ??? ?renderToCanvas() {
?? ??? ??? ??? ?const _wxml = wxml('test', this.tempFile, this.controlContent) //調(diào)用wxml
?? ??? ??? ??? ?const _style = style(this.screenWidth, this.canvasWidth, this.canvasHeight)
?? ??? ??? ??? ?setTimeout(() => {
?? ??? ??? ??? ??? ?const p1 = this.widget.renderToCanvas({
?? ??? ??? ??? ??? ??? ?wxml: _wxml,
?? ??? ??? ??? ??? ??? ?style: _style
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?p1.then((res) => {
?? ??? ??? ??? ??? ??? ?uni.hideLoading()
?? ??? ??? ??? ??? ??? ?this.saveImageToPhotosAlbum();
?? ??? ??? ??? ??? ?}).catch((err) => {
?? ??? ??? ??? ??? ??? ?console.log('生成失敗')
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}, 100)
?? ??? ??? ?},
?? ??? ??? //保存圖片到本地
saveImageToPhotosAlbum() {
uni.showLoading({
title: '正在保存中...'
})
const p2 = this.widget.canvasToTempFilePath()
let that = this
p2.then(result => {
let path = result.tempFilePath
uni.uploadFile({
url: '上傳服務(wù)地址',
filePath: path,
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
let data = JSON.parse(res.data)
if (data.code == 200) {
uni.saveImageToPhotosAlbum({
filePath: path,
success: () => {
uni.hideLoading()
uni.showToast({
title: '保存成功，可去手機相冊查看',
duration: 2000,
icon: 'none'
});
/* uni.redirectTo({
url: '../communityControl/notification?tempFile='+ this.tempFile
}); */
uni.navigateBack();
}
});
}
}
});
})
}
?? ??? ?}
?? ?}?5、寫notification.js文件，必須要按照wxml-to-canvas寫生成模板，不然不生效文章來源：http://www.zghlxwxcb.cn/news/detail-489535.html
const wxml = (name, pic, content) => `
<view class="container">
<text class="content">` + content + `</text>
<image src="` + pic + `" class="pic"/>
</view>
`
/**
* @param {*} screenWidth 屏幕寬度
* @param {*} canvasWidth 畫布寬度
* @param {*} canvasHeight 畫布高度
* @param {*} numberWidth 數(shù)字寬度，動態(tài)設(shè)置
* @return {*}
*/
const style = (screenWidth, canvasWidth, canvasHeight) => {
return {
"container": {
width: canvasWidth,
height: canvasHeight,
position: 'relative',
overflow: 'hidden',
backgroundColor: '#ffffff',
padding: '30rpx 20rpx',
},
"name": {
fontSize: 20,
color: '#333',
marginLeft: canvasWidth * 0.08,
width: canvasWidth * 0.84,
height: screenWidth * 0.18,
textAlign: 'center',
},
"content": {
fontSize: 14,
color: '#333',
width: canvasWidth * 0.84,
height: screenWidth * 0.84,
marginLeft: canvasWidth * 0.08,
marginTop: canvasWidth * 0.08,
},
"pic": {
width: canvasWidth * 0.4,
height: screenWidth * 0.2,
marginTop: canvasWidth * 0.1,
marginLeft: canvasWidth * 0.35,
marginBottom: canvasWidth * 0.05,
borderRadius: screenWidth * 0.14,
overflow: 'hidden',
},
}
}
module.exports = {
wxml,
style
}本文檔適用于vue2，并正式運用到項目中，但本人未在vue3的環(huán)境下使用，有友友提醒說不能用在vue3中，特在此說明，也歡迎使用的友友們提出寶貴意見。文章來源地址http://www.zghlxwxcb.cn/news/detail-489535.html
到了這里，關(guān)于uni-app 微信小程序 圖文生成圖片 wxml-to-canvas的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
