专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络
免费热线：400-683-0016      微信咨询  |  联系我们

微信小程序制作海报保存到相册发朋友圈

当前位置：网站建设 > 技术支持
资料来源：网络整理       时间：2023/2/14 0:27:56       共计：3582 浏览

这个功能应该分三步来做：

一、制作海报图片

二、保存图片到相册

三、手动发朋友圈再到相册中取图片

详细步骤：

一、制作海报

1.要制作能保存到相册的图片，我们需要一个canvas标签，在我们的wxml的最后加入canvas标签： 



    
	
	
  1. 
		
		
			
			
				<button class="shareBtns" bindtap='onSaveImg'></button>
			

		

	
    2. 

	
  2. 
		
		
			
			
				<canvas canvas-id="myCanvas" style="position:fixed;visibily:hidden;width: 646px; height: 966px;" />
			

		

	
    3.

因为我需要的图片大小是646*966的图片，所以大家根据自己相应的需求设置大小。

2.在wxml文件相应的js文件中： 


	
    
		
		
  1. 
			
			
				
				
					//先制作一个canvas标签，再保存成图片
				

			

		
    2. 

		
  2. 
			
			
				
				
					onSaveImg: function () {
				

			

		
    3. 

		
  3. 
			
			
				
				
					const ctx = wx.createCanvasContext('myCanvas'); //看回wxml里的canvas标签，这个的myCanvas要和标签里的canvas-id一致
				

			

		
    4. 

		
  4. 
			
		
    5. 

		
  5. 
			
			
				
				
					ctx.clearRect(0, 0, 644, 966);
				

			

		
    6. 

		
  6. 
			
			
				
				
					ctx.drawImage("../../img/test1.png", 0, 0, 646, 966);
				

			

		
    7. 

		
  7. 
			
			
				
				
					ctx.drawImage("../../img/test2.png", 0, -60, 646, 966);
				

			

		
    8. 

		
  8. 
			
			
				
				
					ctx.drawImage("../../img/tipsImg" + this.data.tipsImgId + ".png", 79, 291 - 60, 492, 244);
				

			

		
    9. 

		
  9. 
			
			
				
				
					ctx.drawImage("../../img/test3.jpg", 90, 780 - 60, 135, 135);
				

			

		
    10. 

		
  10. 
			
			
				
				
					ctx.setFillStyle("#02446e");
				

			

		
    11. 

		
  11. 
			
			
				
				
					ctx.setFontSize(26);
				

			

		
    12. 

		
  12. 
			
			
				
				
					ctx.fillText("亲爱的" + this.data.testName + this.data.testId, 100, 610 - 60);
				

			

		
    13. 

		
  13. 
			
			
				
				
					ctx.setTextAlign("center");
				

			

		
    14. 

		
  14. 
			
			
				
				
					ctx.fillText("你的有入扔有人不迷", 435, 790 - 60);
				

			

		
    15. 

		
  15. 
			
		
    16. 

		
  16. 
			
			
				
				
					ctx.setTextAlign("left");
				

			

		
    17. 

		
  17. 
			
			
				
				
					ctx.setFillStyle("black");
				

			

		
    18. 

		
  18. 
			
			
				
				
					ctx.setFontSize(18);
				

			

		
    19. 

		
  19. 
			
			
				
				
					ctx.fillText("我等你", 330, 825 - 60);
				

			

		
    20. 

		
  20. 
			
			
				
				
					ctx.setFontSize(22);
				

			

		
    21. 

		
  21. 
			
		
    22. 

		
  22. 
			
			
				
				
					ctx.drawImage("../../img/test4.png", 0, 936 - 60, 646, 30);
				

			

		
    23. 

		
  23. 
			
			
				
				
					var self = this;
				

			

		
    24. 

		
  24. 
			
		
    25. 

		
  25. 
			
			
				
				
					ctx.draw(true, setTimeout(function () { //为什么要延迟100毫秒？大家测试一下
				

			

		
    26. 

		
  26. 
			
			
				
				
					wx.canvasToTempFilePath({
				

			

		
    27. 

		
  27. 
			
			
				
				
					x: 0,
				

			

		
    28. 

		
  28. 
			
			
				
				
					y: 0,
				

			

		
    29. 

		
  29. 
			
			
				
				
					width: 646,
				

			

		
    30. 

		
  30. 
			
			
				
				
					height: 966,
				

			

		
    31. 

		
  31. 
			
			
				
				
					destWidth: 646,
				

			

		
    32. 

		
  32. 
			
			
				
				
					destHeight: 966,
				

			

		
    33. 

		
  33. 
			
			
				
				
					canvasId: 'myCanvas',
				

			

		
    34. 

		
  34. 
			
			
				
				
					success: function (res) {
				

			

		
    35. 

		
  35. 
			
			
				
				
					self.data.savedImgUrl = res.tempFilePath;
				

			

		
    36. 

		
  36. 
			
			
				
				
					self.saveImageToPhoto();
				

			

		
    37. 

		
  37. 
			
			
				
				
					}
				

			

		
    38. 

		
  38. 
			
			
				
				
					})
				

			

		
    39. 

		
  39. 
			
			
				
				
					}, 100))
				

			

		
    40. 

		
  40. 
			
			
				
				
					},
				

			

		
    41.

二、保存图片到相册

这个功能和我的上一篇文章的功能一致，以下是这个案例的代码： 



    
	
	
  1. 
		
		
			
			
				//保存图片到相册
			

		

	
    2. 

	
  2. 
		
		
			
			
				saveImageToPhoto: function () {
			

		

	
    3. 

	
  3. 
		
		
			
			
				if (this.data.savedImgUrl != "") {
			

		

	
    4. 

	
  4. 
		
		
			
			
				wx.saveImageToPhotosAlbum({
			

		

	
    5. 

	
  5. 
		
		
			
			
				filePath: this.data.savedImgUrl,
			

		

	
    6. 

	
  6. 
		
		
			
			
				success: function () {
			

		

	
    7. 

	
  7. 
		
		
			
			
				wx.showModal({
			

		

	
    8. 

	
  8. 
		
		
			
			
				title: '保存图片成功',
			

		

	
    9. 

	
  9. 
		
		
			
			
				content: '寻人启事已经保存到相册，您可以手动分享到朋友圈！',
			

		

	
    10. 

	
  10. 
		
		
			
			
				showCancel: false
			

		

	
    11. 

	
  11. 
		
		
			
			
				});
			

		

	
    12. 

	
  12. 
		
		
			
			
				},
			

		

	
    13. 

	
  13. 
		
		
			
			
				fail: function (res) {
			

		

	
    14. 

	
  14. 
		
		
			
			
				console.log(res);
			

		

	
    15. 

	
  15. 
		
		
			
			
				if (res.errMsg == "saveImageToPhotosAlbum:fail cancel") {
			

		

	
    16. 

	
  16. 
		
		
			
			
				wx.showModal({
			

		

	
    17. 

	
  17. 
		
		
			
			
				title: '保存图片失败',
			

		

	
    18. 

	
  18. 
		
		
			
			
				content: '您已取消保存图片到相册！',
			

		

	
    19. 

	
  19. 
		
		
			
			
				showCancel: false
			

		

	
    20. 

	
  20. 
		
		
			
			
				});
			

		

	
    21. 

	
  21. 
		
		
			
			
				} else {
			

		

	
    22. 

	
  22. 
		
		
			
			
				wx.showModal({
			

		

	
    23. 

	
  23. 
		
		
			
			
				title: '提示',
			

		

	
    24. 

	
  24. 
		
		
			
			
				content: '保存图片失败，您可以点击确定设置获取相册权限后再尝试保存！',
			

		

	
    25. 

	
  25. 
		
		
			
			
				complete: function (res) {
			

		

	
    26. 

	
  26. 
		
		
			
			
				console.log(res);
			

		

	
    27. 

	
  27. 
		
		
			
			
				if (res.confirm) {
			

		

	
    28. 

	
  28. 
		
		
			
			
				wx.openSetting({}) //打开小程序设置页面，可以设置权限
			

		

	
    29. 

	
  29. 
		
		
			
			
				} else {
			

		

	
    30. 

	
  30. 
		
		
			
			
				wx.showModal({
			

		

	
    31. 

	
  31. 
		
		
			
			
				title: '保存图片失败',
			

		

	
    32. 

	
  32. 
		
		
			
			
				content: '您已取消保存图片到相册！',
			

		

	
    33. 

	
  33. 
		
		
			
			
				showCancel: false
			

		

	
    34. 

	
  34. 
		
		
			
			
				});
			

		

	
    35. 

	
  35. 
		
		
			
			
				}
			

		

	
    36. 

	
  36. 
		
		
			
			
				}
			

		

	
    37. 

	
  37. 
		
		
			
			
				});
			

		

	
    38. 

	
  38. 
		
		
			
			
				}
			

		

	
    39. 

	
  39. 
		
		
			
			
				}
			

		

	
    40. 

	
  40. 
		
		
			
			
				})
			

		

	
    41. 

	
  41. 
		
		
			
			
				}
			

		

	
    42. 

	
  42. 
		
		
			
			
				},
			

		

	
    43.

三、手动发朋友圈再到相册中取图片


版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。
·上一条：invoke和begininvoke 区别 | ·下一条：微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有