<template><view class='page'><input type="text" value="" class="input" v-model="text" placeholder="請輸入需要添加的文字" maxlength="5" /><button type="primary" @click='copyFn'>生成圖片</button><canvas canvas-id="myCanvas" id='sss'></canvas><image :src="base64" mode="" v-if="base64" class='immm'></image><button type="primary" @click='bcFn' v-if="base64" >保存圖片</button></view> </template> <script>export default {data() {return {text: '',base64:null}},methods: {copyFn() {let ww, hh;const query = uni.createSelectorQuery().in(this);query.select('#sss').boundingClientRect(data => { //獲取canvas-domww = data.width; //準(zhǔn)確的寬高hh = data.heightvar ctx = uni.createCanvasContext('myCanvas') //綁定畫布ctx.drawImage('../../static/132.png', 0, 0, ww, hh); //填充進圖片ctx.setFillStyle('#000') //設(shè)置內(nèi)容1的文字樣式ctx.setFontSize(30);ctx.setTextAlign('center') //設(shè)置對于坐標(biāo)點的對齊方式ctx.fillText(this.text,ww/2,hh/2+55) //計算距離，將文字定位于圖片的某處ctx.setFillStyle('red') //設(shè)置內(nèi)容2的文字樣式ctx.setFontSize(20);ctx.setTextAlign('center') //同上ctx.fillText('我就試試',ww/2,hh/2+80)ctx.draw(); //輸出到畫布中uni.showLoading({ //增加loading等待效果mask:true})setTimeout(()=>{ //不加延遲的話，base64有時候會賦予undefineduni.canvasToTempFilePath({canvasId:'myCanvas',success: (res) => {this.base64=res.tempFilePath}})uni.hideLoading();},1200)}).exec();},bcFn(){uni.saveImageToPhotosAlbum({ //保存圖片filePath:this.base64, success: (res) => {uni.showToast({title:'保存成功',})}})}}} </script> .input {width: 100%;height: 80rpx;background: #ccc; }#sss {position: absolute;width: 750rpx;height: 426rpx;top: -99999899rpx;left: -99999899rpx;z-index: 9999; } .immm {width: 750rpx;height: 426rpx; }

?

總結(jié)

以上是生活随笔為你收集整理的uni-app海报(合成图片)demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。