uniapp生成高清海報圖canvas

本期先講uniapp生成，下期講本插件懟到原生小程序中，編輯不易，給個贊吧！！！！！
首先將三個外部文件放到你的公共文件夾下

然后在海報生成的頁面內引入這個兩個文件

data上設置變量

html代碼塊

canvas-id設置與data的canvasId一致

代碼塊

廢話不多說直接貼代碼

html

<!-- 海報生成 --><view><!-- 圖片展示由自己實現 --><view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()"><view class="flex_column"><view class="backgroundColor-white border_radius_10px"><image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image></view><view class="marginTop2vh"><button class="savaImg" type="primary" @tap.prevent.stop="saveImage()"> 保存圖片</button><button class="closeImg" @tap.prevent.stop="hideQr()">關閉</button></view></view></view><!-- 畫布 --><view class="hideCanvasView"><canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px',height: (poster.height||10) + 'px'}"></canvas></view></view>

css代碼

// 海報生成樣式.creatPosterBtn {position: absolute;top: 30rpx;right: 40rpx;background: rgba(0, 0, 0, 0.5) !important;color: #FFFFFF;border-radius: 2px;z-index: 10;font-size: 15px;padding: 5px 10px;line-height: 40rpx;}.hideCanvasView {position: relative;}.hideCanvas {position: fixed;top: -99999upx;left: -99999upx;z-index: -99999;}.flex_row_c_c {display: flex;flex-direction: row;justify-content: center;align-items: center;}.modalView {width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;outline: 0;transform: scale(1.2);perspective: 2500upx;background: rgba(0, 0, 0, 0.6);transition: all .3s ease-in-out;pointer-events: none;backface-visibility: hidden;z-index: 999;}.modalView.show {opacity: 1;transform: scale(1);pointer-events: auto;}.flex_column {display: flex;flex-direction: column;}.backgroundColor-white {background-color: white;}.backgroundColor-white image {border-radius: 0px;}.border_radius_10px {border-radius: 0px;}.padding1vh {padding: 1vh;}.posterImage {width: 80vw;}.flex_row {display: flex;flex-direction: row;}.marginTop2vh {margin-top: 2vh;}.savaImg {width: 100%;padding: 16rpx 0;margin-top: 20rpx;font-size: 28rpx;line-height: 50rpx;display: block;}.closeImg {width: 100%;padding: 16rpx 0;margin-top: 20rpx;font-size: 28rpx;line-height: 50rpx;background: #FFFFFF;color: #333333;display: block;}

最重要的js模塊

import _app from '@/utils/QS-SharePoster/app.js'; import {getSharePoster} from '@/utils/QS-SharePoster/QS-SharePoster.js';export default {data() {return {QrSrc: '',wmVisible: false,poster: {},qrShow: false,canvasId: 'default_PosterCanvasId',count: 0,}},onLoad(options) {// 海報二維碼進入場景if (options.scene) {// 此方法為獲取你的商品詳情方法，此處省略，主要是掃碼進來會拿scene，例如你的商品idthis.getdetail(options.scene);}},methods: {// 生成海報creatPoster: function() {this.wmVisible = true},// 關閉海報closePoster: function() {this.wmVisible = false},// 海報生成相關js開始async shareFc() {let _this = this;try {this.count++;_app.log('準備生成:' + new Date())const d = await getSharePoster({_this: _this, //若在組件中使用 必傳type: 'testShareType',formData: {//訪問接口獲取背景圖攜帶自定義數據},posterCanvasId: _this.canvasId, //canvasIddelayTimeScale: 20, //延時系數background: {width: 1080,height: 1920,},setCanvasWH({bgObj}) {_this.poster = bgObj},drawArray({bgObj,type,bgScale,setBgObj,getBgObj}) {return [{type: 'image',id: 'productImage',// url: _this.count % 2 === 0 ? '/static/1.png' : '/static/2.jpg',url: _this.swiperList[0],dx: getBgObj().width * .05 - 20,dy: getBgObj().width * .05 - 20,serialNum: 0,infoCallBack(imageInfo) {let width;let height;if (imageInfo.width > imageInfo.height) {width = imageInfo.width > 700 ? 700 : imageInfo.width;height = width / imageInfo.width * imageInfo.height;} else {height = imageInfo.height > 700 ? 700 : imageInfo.height;width = height / imageInfo.height * imageInfo.width;}if (width < 500) {width = 500;height = width / imageInfo.width * imageInfo.height;}let addHeight = height * .3;if (addHeight < 150) addHeight = 150;if (addHeight > 250) addHeight = 250;setBgObj({width,height: height + addHeight + 280,backgroundColor: '#ffffff'});return {dWidth: width - 70,dHeight: height}}},{type: 'text',id: 'productName',text: _this.vehicleInfo.name,color: '#000',serialNum: 1,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width * 0.9,lineNum: 2},dx: getBgObj().width * .05,dy: productImage.dHeight + addHeight * .2,}}}, {type: 'text',text: '車輛售價：10萬',color: '#ff5500',serialNum: 1,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width,lineNum: 1},dx: getBgObj().width * .05,dy: productImage.dHeight + addHeight * .38,}}}, {type: 'text',text: '新車售價：20萬',color: '#000',serialNum: 1,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width,lineNum: 1},dx: getBgObj().width * .05,dy: productImage.dHeight + addHeight * .48,}}},{type: 'text',text: '車輛里程：5萬公里',color: '#000',serialNum: 3,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width * 0.5,lineNum: 1},dx: getBgObj().width * .05,dy: productImage.dHeight + addHeight * .58,}}},{type: 'text',text: '排放標準：國五' ,color: '#000',serialNum: 4,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width * 0.5,lineNum: 1},dx: getBgObj().width * .05,dy: productImage.dHeight + addHeight * .68,}}},{type: 'text',text: '牌照地點：北京',color: '#000',serialNum: 5,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width * 0.5,lineNum: 1},dx: getBgObj().width * .05,dy: productImage.dHeight + addHeight * .78,}}},{type: 'text',text: '上牌時間：2019年1月1日' ,serialNum: 6,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width * 0.5,lineNum: 1},dx: getBgObj().width * .05,dy: productImage.dHeight + addHeight * .88,}}},// 此處放的為商品的太陽碼，QrSrc為太陽碼地址或者遠程圖片地址{type: 'image',id: 'smallImage',url: _this.QrSrc,dx: getBgObj().width * .05,dy: 600,serialNum: 7,serialNum: 6,allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {dWidth: 150,dHeight: 150,dx: getBgObj().width * .65,dy: productImage.dHeight + addHeight * .32,}}},{type: 'text',text: '識別小程序',serialNum: 8,color: '#000',allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width * 0.5,lineNum: 1},dx: getBgObj().width * .65,dy: productImage.dHeight + addHeight * .78,}}},{type: 'text',text: '進入二手車商城',serialNum: 9,color: '#000',allInfoCallback({drawArray}) {const productImage = drawArray.find(item => item.id === 'productImage')const addHeight = getBgObj().height - productImage.dHeight;return {size: getBgObj().width * 0.04,lineFeed: {maxWidth: getBgObj().width * 0.5,lineNum: 1},dx: getBgObj().width * .62,dy: productImage.dHeight + addHeight * .88,}}},]}})_app.log('海報生成成功, 時間:' + new Date() + '， 臨時路徑: ' + d.poster.tempFilePath)_this.poster.finalPath = d.poster.tempFilePath;_this.qrShow = true;} catch (e) {_app.hideLoading();_app.showToast(JSON.stringify(e));}},saveImage() {let that = this;wx.getSetting({success(res) {console.log(res)console.log(that.poster.finalPath)// 如果沒有則獲取授權if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success() {wx.saveImageToPhotosAlbum({filePath: that.poster.finalPath,success() {wx.showToast({title: '保存成功'})},fail() {wx.showToast({title: '保存失敗',icon: 'none'})}})},fail() {wx.showModal({title: '提示：',content: "授權失敗，請前往設置中心設置權限",confirmText: '前往授權',success: function() {wx.openSetting({success(res) {// res.authSetting = {// "scope.userInfo": true,// "scope.userLocation": true// }}})}})}})} else {// 有則直接保存wx.saveImageToPhotosAlbum({filePath: that.poster.finalPath,success() {wx.showToast({title: '保存成功'})},fail() {wx.showToast({title: '保存失敗',icon: 'none'})}})}}})// // #ifndef H5// uni.saveImageToPhotosAlbum({// filePath: that.poster.finalPath,// success(res) {// _app.showToast('保存成功');// }// })// // #endif// // #ifdef H5// _app.showToast('保存了');// // #endif},share() {// #ifdef APP-PLUS_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);// #endif// #ifndef APP-PLUS_app.showToast('分享了');// #endif},hideQr() {this.qrShow = false;},// 海報生成相關js結束}}

生成結果

原插件地址：https://ext.dcloud.net.cn/plugin?id=471
編輯不易，給個贊吧！！！！

總結

以上是生活随笔為你收集整理的uniapp生成高清海报图canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。