本篇文章帶大家聊聊微信小程序保存圖片組件開發(fā)，希望對(duì)大家有所幫助！

許多微信小程序通過保存海報(bào)讓用戶去分享活動(dòng)讓更多的人知道自己的小程序，想必在平時(shí)開發(fā)小程序的時(shí)候應(yīng)該有遇見過吧?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

今天我就來分享下之前在公司做的一個(gè)小程序保存海報(bào)的功能。首先我先描述下之前在公司做的需求是什么樣的。公司上線的小程序會(huì)有一個(gè)長期的活動(dòng)目的就是去推廣新用戶，每個(gè)用戶都要有一張屬于自己的海報(bào)，通過個(gè)人海報(bào)去推廣則只是單純的一種方式。

接到任務(wù)后，我也先去萬能互聯(lián)網(wǎng)做了調(diào)查但是我的師兄和我說這個(gè)做過類似的但是當(dāng)時(shí)只是單純?yōu)榱送瓿扇蝿?wù)所以代碼很亂，然后他就從其他項(xiàng)目的代碼找呀找，然后找到了給我~~~ 而當(dāng)時(shí)給到我的時(shí)間緊任務(wù)重呀只好先用著調(diào)整一些并且交差了。之后呢我就根據(jù)網(wǎng)上的文章然后一步一步踩坑，一步一步走實(shí)現(xiàn)了一個(gè)保存海報(bào)的組件。

思路

首先聲明下組件采用的是uniapp，具體實(shí)現(xiàn)了可以繪制圖片、繪制文字以及保存海報(bào)至相冊(cè)的基本功能，在開發(fā)中這些也完全夠用了。

通過canvas繪制海報(bào)。通過uni.canvasToTempFilePath?將繪制好的 canvas轉(zhuǎn)為圖片。通過uni.saveImageToPhotosAlbum?將本地臨時(shí)路徑的圖片保存至手機(jī)相冊(cè)中。而我的想法是將所有采用的方法全部封裝到組件中，只通過父組件去調(diào)用需要使用的方法和調(diào)整相關(guān)的參數(shù)即可。 具體使用可以查看示例代碼

通過canvas繪制海報(bào)內(nèi)容的順序先后問題

通過使用promise對(duì)象決定繪制海報(bào)內(nèi)容的順序先后。promise.all()方法進(jìn)行canvas最后一步的繪畫操作?context.draw()

注意uni.getImageInfo()

• 在繪制圖片 和 頭像時(shí)，組件通過uni.getImageInfo()?去獲取圖片的相關(guān)信息，調(diào)用該方法成功的前提是需要在微信小程序后臺(tái)配置download域名和request域名當(dāng)然最好把uploadFile域名也一起配置，防止出差錯(cuò)。但是官方給出的提示是配置download域名白名單即可，但是獲取不到圖片信息，這算是一個(gè)大坑了。

• 如果沒有進(jìn)行相關(guān)配置，在調(diào)試時(shí) 或者 體驗(yàn)版 正式版等 打開了vconsole調(diào)試工具。uni.getImageInfo() 是可以獲取到圖片信息的，一旦關(guān)閉了vconsole uni.getImageInfo() 將會(huì)fail， 也是個(gè)坑。

本組件方法，變量介紹

props

• canvasInfo Object （必需）

  • canvasWidth 畫布寬度

  • canvasHeight 畫布高度

  • canvasId 畫布標(biāo)識(shí)

• isFullScreen Boolean

  • 為ture時(shí)表示畫布為手機(jī)屏幕全屏，canvasInfo設(shè)置的寬高將失效。

  • 默認(rèn)為 false

methods

• canvasInit(callback) canvas初始化，所有有關(guān)畫布canvas操作需在其回調(diào)函數(shù)操作。

• drawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) 在canvas繪制一張圖片

• drawCircularAvatar(context, url, _circularX, _circularY, _circularR) 在canvas繪制一張圓形圖片

• drawText(options) 在canvas繪制單行、多行文本

• startDrawToImage(context, promiseArr, callback) 將canvas操作draw()進(jìn)行繪制

• posterToPhotosAlbum(filePath) 保存至手機(jī)相冊(cè)

示例代碼

<template>
	<view>
		<view class="savePosterItem">
			<image v-show="tempFilePath" :src="tempFilePath"></image>
			<save-poster-com v-show="!tempFilePath" ref="savePoster" :canvasInfo="canvasInfo"></save-poster-com>
		</view>
		
		
		<button class="savePosterBtn" type="primary" @click="saveBtnFun">保存海報(bào)</button>
	</view>
</template>

<script>
	import SavePosterCom from &#39;@/components/SavePosterCom/SavePosterCom.vue&#39;
	export default {
		components: {
			SavePosterCom
		},
		data() {
			return {
				canvasInfo: {
					canvasWidth: 620,
					canvasHeight: 950,
					canvasId: &#39;save-poster&#39;
				},
				tempFilePath: &#39;&#39;,
				canvasBgUrl: &#39;https://images.pexels.com/photos/4065617/pexels-photo-4065617.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500&#39;,
				avatarUrl: &#39;https://p9-passport.byteacctimg.com/img/user-avatar/4dbf31fa6dec9c65b78a70d28d843c04~300x300.image&#39;
			}
		},
		onLoad() {
			let {
				drawCanvasImage,
				drawCircularAvatar,
				drawText
			} = this.$refs.savePoster.$options.methods
			this.$refs.savePoster.canvasInit(({
				context,
				comThis
			}) => {
				// 獲取畫布寬高
				let canvasWH = comThis.canvasWH
				// 繪制海報(bào)背景圖
				let promise_1 = drawCanvasImage(context, this.canvasBgUrl, canvasWH.canvasWidth, canvasWH.canvasHeight)
				// 必須先繪制玩海報(bào)背景圖 再去操作其他繪制內(nèi)容
				promise_1.then(res => {
					let promise_2 = drawCircularAvatar(context, this.avatarUrl, canvasWH.canvasWidth / 2, canvasWH.canvasHeight /
						7, 70)
					
					let promise_3 = drawText({
						context: context,
						text: &#39;皮皮蝦仁&#39;,
						dx: (canvasWH.canvasWidth / 2) + 60,
						dy: canvasWH.canvasHeight / 4,
						fontSize: 30,
						fontColor: &#39;#5D4037&#39;
					})
					
					let promise_4 = drawCanvasImage(context, this.avatarUrl, 150, 150, (canvasWH.canvasWidth / 2) + 85, (canvasWH.canvasHeight -
						165))
					 
					this.$refs.savePoster.startDrawToImage(context, [promise_1,promise_2,promise_4], (tempFilePath) => {
						this.tempFilePath = tempFilePath
					})
				})
			})
		},
		methods: {
			saveBtnFun() {
				uni.showModal({
					title: &#39;保存海報(bào)&#39;,
					content: &#39;海報(bào)將被保存至相冊(cè)中&#39;,
					confirmText: &#39;保存&#39;,
					success: (res) => {
						if(res.confirm) {
							this.$refs.savePoster.posterToPhotosAlbum(this.tempFilePath)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.savePosterItem {
		text-align: center;
	}
	.savePosterItem > image {
		width: 620rpx;
		height: 950rpx;
	}
	
	.savePosterBtn {
		margin-top: 40rpx;
		width: 80%;
	}
</style>

組件源碼

<template>
	<view>
		<canvas :canvas-id="canvasInfo.canvasId" :style="{width: canvasWH.canvasWidth + &#39;px&#39;, height: canvasWH.canvasHeight + &#39;px&#39;}"></canvas>
	</view>
</template>

<script>
	export default {
		name: &#39;savePosterCom&#39;,
		data() {
			return {
				userPhoneWHInfo: {},
				canvasWH: {
					canvasWidth: 0,
					canvasHeight: 0
				}
			}
		},
		props: {
			// 決定保存下來的圖片的寬高
			canvasInfo: {
				type: Object,
				default: () => {
					return {
						canvasWidth: 0,
						canvasHeight: 0,
						canvasId: &#39;canvasId&#39;
					}
				}
			},
			// canvas畫布是不是全屏，默認(rèn)是false。 false時(shí)使用必須傳 canvasInfo
			isFullScreen: Boolean
		},
		created() {
			this.userPhoneWHInfo = this.getPhoneSystemInfo()
			if (this.isFullScreen) { // 畫布全屏
				this.canvasWH.canvasWidth = this.userPhoneWHInfo.windowWidth
				this.canvasWH.canvasHeight = this.userPhoneWHInfo.windowHeight
			} else { // 指定寬高
				this.canvasWH.canvasWidth = this.canvasInfo.canvasWidth
				this.canvasWH.canvasHeight = this.canvasInfo.canvasHeight
			}
		},
		mounted() {},
		methods: {
			/**
			* 獲取用戶手機(jī)屏幕信息
			*/
			getPhoneSystemInfo() {
				const res = uni.getSystemInfoSync();
				return {
					windowWidth: res.windowWidth,
					windowHeight: res.windowHeight
				}
			},
			/** 獲取 CanvasContext實(shí)例
			* @param {String} canvasId 
			*/
			getCanvasContextInit(canvasId) {
				return uni.createCanvasContext(canvasId, this)
			},
			/** 保存海報(bào)組件初始化
			* @param {Function} callback(context) 回調(diào)函數(shù)
			*/
			canvasInit(callback) {
				let context = this.getCanvasContextInit(this.canvasInfo.canvasId)
				if (context) {
					callback({
						context: context,
						comThis: this
					})
				}
			},
			/** 將上訴的繪制畫到畫布中 并且 將畫布導(dǎo)出為圖片
			*  @param context 畫布
			*  @param {Promise[]} 存放Promise的數(shù)組 
			*  @param {Function} callback 保存圖片后執(zhí)行的回調(diào)函數(shù)(本地圖片臨時(shí)路徑)
			*/
			startDrawToImage(context, promiseArr, callback) {
				// 將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中
				let canvasId = this.canvasInfo.canvasId
				let tempFilePath = &#39;&#39;
				Promise.all(promiseArr).then(res => {
					context.draw(false, async () => {
						callback(await this.canvasToImage(canvasId))
					})
				})
			},
			/**
			* 在canvas繪制一張圖片
			* @param context 畫布
			* @param src 圖片資源
			* @param _imageWidth 圖片寬度
			* @param _imageHeight 圖片高度 
			*/
			drawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: src,
						success: res => {
							context.drawImage(res.path, (dx - _imageWidth), (dy - _imageHeight), _imageWidth, _imageHeight)
							resolve(context)
						},
					})
				})
			},
			/** 繪制一個(gè)圓形頭像
			* @param  context 畫布 
			* @param  url     圖片地址
			* @param  _circularX  圓心X坐標(biāo)
			* @param  _circularY  圓心Y坐標(biāo)
			* @param  _circularR  圓半徑
			*/
			drawCircularAvatar(context, url, _circularX, _circularY, _circularR) {
				let dx = _circularX - _circularR;
				let dy = _circularY - _circularR;
				let dwidth = _circularR * 2;
				let dheight = _circularR * 2
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: url,
						success: res => {
							context.save()
							context.beginPath()
							// _circularX圓的x坐標(biāo)  _circularY圓的y坐標(biāo)  _circularR圓的半徑
							context.arc(_circularX, _circularY, _circularR, 0, 2 * Math.PI)
							context.clip()
							// dx: 圖像的左上角在目標(biāo)canvas上 X 軸的位置
							// dy: 圖像的左上角在目標(biāo)canvas上 Y 軸的位置
							// dwidth: 在目標(biāo)畫布上繪制圖像的寬度，允許對(duì)繪制的圖像進(jìn)行縮放
							// dheight: 在目標(biāo)畫布上繪制圖像的高度，允許對(duì)繪制的圖像進(jìn)行縮放
							context.drawImage(res.tempFilePath, dx, dy, dwidth, dheight)
							context.restore()
							// context.draw()
							resolve(context)
						}
					})
				})
			},
			/** 繪制多行文本 注:, 和 空格都算一個(gè)字
			* @param context 畫布
			* @param text 需要被繪制的文本
			* @param dx 左上角x坐標(biāo)
			* @param dy 右上角y坐標(biāo)
			* @param rowStrnum 每行多少個(gè)字 (默認(rèn)為text字體個(gè)數(shù)->單行)
			* @param fontSize 文字大小 （默認(rèn)16）
			* @param fontColor 文字顏色 (默認(rèn)black)
			* @param lineHeight 單行文本行高 (默認(rèn)0)
			*/
			drawText(options) {
				let {
					context,
					text,
					dx,
					dy,
					rowStrnum = text.length,
					lineHeight = 0,
					fontSize = 16,
					fontColor = &#39;black&#39;
				} = options
				return new Promise((resolve, reject) => {
					context.setFontSize(fontSize)
					context.setFillStyle(fontColor)
					context.setTextBaseline(&#39;middle&#39;)
					// 獲取需要繪制的文本寬度
					let textWidth = Number(context.measureText(text).width)
					// console.log(&#39;textWidth&#39;,textWidth)
					// 獲取文本的字?jǐn)?shù) 
					let textNum = text.length
					// 獲取行數(shù) 向上取整
					let lineNum = Math.ceil(textNum / rowStrnum)
					// console.log(&#39;textNum&#39;,textNum)
					// console.log(&#39;lineNum&#39;,lineNum)
					for (let i = 0; i < lineNum; i++) {
						let sliceText = text.slice(i * rowStrnum, (i + 1) * rowStrnum)
						// fillText 的 dx = 文字最左邊的距離到屏幕政策的距離
						context.fillText(sliceText, dx - textWidth, dy + i * lineHeight);
					}
					resolve(context)
				})
			},
			/** 將畫布導(dǎo)出為圖片
			* @param canvasId 畫布標(biāo)識(shí)
			*/
			canvasToImage(canvasId) {
				return new Promise((resolve, reject) => {
					uni.canvasToTempFilePath({
						canvasId: canvasId, // 畫布標(biāo)識(shí)
						success: res => {
							// 在H5平臺(tái)下，tempFilePath 為 base64
							resolve(res.tempFilePath)
						},
						fail: err => {
							console.log(&#39;err&#39;, err)
							reject(err)
						}
					}, this)
				})
			},
			/** 保存生成的圖片到本地相冊(cè)中
			*  @param {String} filePath 圖片臨時(shí)路勁
			*/
			posterToPhotosAlbum(filePath) {
				console.log(&#39;filePath&#39;,filePath)
				uni.showLoading({
					title: &#39;保存中...&#39;
				})
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: (res) => {
						uni.showToast({
							title: &#39;保存成功，請(qǐng)前往手機(jī)相冊(cè)中查看&#39;,
							mask: true,
							icon: &#39;none&#39;,
							duration: 2000
						})
					},
					fail: (err) => {
						console.log(&#39;err&#39;,err)
						if (err.errMsg.includes(&#39;deny&#39;)||err.errMsg.includes(&#39;denied&#39;)) { // 用戶選擇拒絕 
							this.openSetting()
						} else if (err.errMsg.includes(&#39;fail cancel&#39;)) { // 用戶在保存圖片時(shí) 取消了
							uni.showToast({
								title: &#39;已取消保存，無法保存至相冊(cè)&#39;,
								mask: true,
								icon: &#39;none&#39;,
								duration: 2000
							})
							return
						}
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			/**
			* 打開攝像頭設(shè)置權(quán)限頁面
			*/
			openSetting() {
				uni.showModal({
					title: &#39;溫馨提示&#39;,
					content: &#39;保存圖片至相冊(cè)中，需要您同意添加訪問相冊(cè)權(quán)限&#39;,
					cancelText: &#39;拒絕&#39;,
					confirmText: &#39;同意&#39;,
					success: res => {
						if (res.confirm) {
							uni.openSetting({
								success: settingdata => {
									if (settingdata.authSetting[&#39;scope.writePhotosAlbum&#39;]) {
										console.log(&#39;獲取權(quán)限成功，給出再次點(diǎn)擊圖片保存到相冊(cè)的提示。&#39;)
										uni.showToast({
											title: &#39;授權(quán)成功，請(qǐng)?jiān)俅吸c(diǎn)擊保存&#39;,
											icon: &#39;none&#39;,
											duration: 2000,
										})
									} else {
										console.log(&#39;獲取權(quán)限失敗，給出不給權(quán)限就無法正常使用的提示&#39;)
										uni.showToast({
											title: &#39;需要訪問相冊(cè)權(quán)限&#39;,
											icon: &#39;none&#39;,
											duration: 2000,
										})
									}
								},
								fail: (res) => {
									console.log(&#39;err&#39;, err)
								}
							})
						} else {
							uni.showToast({
								title: &#39;已拒絕授權(quán)，無法保存至相冊(cè)&#39;,
								mask: true,
								icon: &#39;none&#39;,
								duration: 2000
							})
							return
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>

效果

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程入門??！

以上是手把手帶你在小程序中實(shí)現(xiàn)保存圖片組件功能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！