• uniapp H5生成画布，插入网络图片。下载画布

    因为网络图片不能直接使用ctx.drawImage(）插入。得使用uni.getImageInfo()方法下载后插入。
    但是当画布中存在多张网络图片时，必须等待uni.getImageInfo()下载完成后才行。这样得下载套下载。太过于繁琐。所以定义了一个递归下载方法。同时避免下载图片异步，画布不显示的结果。

     

    一、引用函数

    1. /**
    2.  * canvas文本自动换行，注意调用前要设置字体，例如： ctx.font = '12px Arial'
    3.  * @param {*} ctx CanvasRenderingContext2D
    4.  * @param {*} text  文本
    5.  * @param {*} x 
    6.  * @param {*} y 
    7.  * @param {*} lw 所占宽度
    8.  * @param {*} lh 行高
    9.  * return 绘制文本所需的高度
    10.  */
    11. const fillTextLineBreak = (ctx, text, x, y, lw, lh, color = '#000', font = '14') => {
    12. 	var i = 0;
    13. 	var n = 0;
    14. 	var r = -1;
    15. 	var initHeight = 0;
    16. 	ctx.font = "" + font + "px Arial"; //字体大小
    17. 	ctx.fillStyle = color; //字体颜色
    18. 	while (i < text.length) {
    19. 		while (ctx.measureText(text.substring(n, i)).width < lw && i < text.length) {
    20. 			i++
    21. 		}
    22. 		r++
    23. 		ctx.fillText(text.substring(n, i), x, y + lh * r)
    24. 		n = i
    25. 	}
    26. 	initHeight = lh * r;
    27. 	wx.setStorageSync('initHeight', initHeight);
    28. }
    29.  
    30.  
    31. /**
    32.  * 自定义函数roundRect
    33.  * 画圆弧
    34.  * ctx >> 画布
    35.  *bg_x 图片的x坐标
    36.  *bg_y 图片的y坐标
    37.  *bg_w 图片宽度
    38.  *bg_h 图片高度
    39.  *bg_r 图片圆角
    40.  *
    41.  */
    42. function roundRect(ctx, img, bg_x, bg_y, bg_w, bg_h, bg_r) {
    43. 	// 开始绘制
    44. 	ctx.save();
    45. 	ctx.beginPath();
    46. 	ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
    47. 	ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
    48. 	ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
    49. 	ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
    50. 	ctx.clip();
    51. 	ctx.drawImage(img, bg_x, bg_y, bg_w, bg_h);
    52. 	// 恢复之前保存的绘图上下文
    53. 	ctx.restore();
    54. }
    55.  
    56.  
    57. /*
    58.  * 画布网络图片预处理
    59.  */
    60. function canvasImage(that, Datas = {}, callback = null) {
    61. 	var i = Datas.i ? Datas.i : 0;
    62. 	var callback_Datas = Datas.callback_Datas ? Datas.callback_Datas : [];
    63. 	var data = Datas.data ? Datas.data : [];
    64. 	uni.getImageInfo({
    65. 		src: data[i],
    66. 		success(res) {
    67. 			i++;
    68. 			callback_Datas.push(res.path)
    69. 			if (i == data.length) {
    70. 				//回调函数
    71. 				if (callback) {
    72. 					callback(that, callback_Datas);
    73. 					return;
    74. 				}
    75. 			} else {
    76.                 //递归执行下一个上传
    77. 				canvasImage(that, {
    78. 					i,
    79. 					callback_Datas,
    80. 					data,
    81. 				}, callback);
    82. 			}
    83. 		},
    84. 		fail(e) {
    85. 			wx.hideLoading();
    86. 			//关闭画布弹窗
    87. 			that.posterHideCanvas();
    88. 			setTimeout(function() {
    89. 				wx.showToast({
    90. 					title: '生成失败，稍后再试',
    91. 					icon: 'none',
    92. 				})
    93. 			}, 0)
    94. 		}
    95. 	});
    96. }
    97.  
    98. /**
    99.  * 自定义函数roundRect
    100.  * 画圆弧背景
    101.  * ctx >> 画布
    102.  *bg_x 背景的x坐标
    103.  *bg_y 背景的y坐标
    104.  *bg_w 背景宽度
    105.  *bg_h 背景高度
    106.  *bg_r 背景圆角
    107.  *
    108.  */
    109. function roundRectKuang(ctx, bg_x, bg_y, bg_w, bg_h, bg_r, color = '#fff') {
    110. 	// 开始绘制
    111. 	ctx.save();
    112. 	ctx.beginPath();
    113. 	ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
    114. 	ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
    115. 	ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
    116. 	ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
    117. 	ctx.clip();
    118. 	ctx.fillStyle = color;
    119. 	ctx.fillRect(bg_x, bg_y, bg_w, bg_h);
    120. 	// 恢复之前保存的绘图上下文
    121. 	ctx.restore();
    122. }

     二、index.vue

    1. <view v-show="posterDatas.hidden" @touchmove="posterTouchMove" class="canvasMain flex center">
    2. 			<view class="box flex center column">
    3. 				<canvas :canvas-id="canvasId" :style="canvasStyle" class="canvas">canvas>
    4. 				<button v-if="posterDatas.buttonType==1" class="btn" @click="posterDownImage">点击保存图片到相册button>
    5. 				<button v-else-if="posterDatas.buttonType==2" class="btn">已保存到相册，快去分享吧button>
    6. 				<button v-else-if="posterDatas.buttonType==3" class="btn" open-type="openSetting"
    7. 					bindopensetting="posterOpenSetting">进入设置页，开启“保存到相册”button>
    8. 				<text class="iconfont icon-x" @click="posterHideCanvas">text>
    9. 			view>
    10. 		view>
    11.  
    12. <style>
    13. /* 海报 */
    14. .canvasMain {
    15.   position: fixed;
    16.   left: 0;
    17.   top: 0;
    18.   width: 100%;
    19.   height: 100%;
    20.   background-color: rgba(0, 0, 0, 0.6);
    21.   z-index: 9999;
    22. }
    23.  
    24. .canvasMain.hidden {
    25.   top: 100%;
    26.   left: 100%;
    27. }
    28.  
    29. .canvasMain .box {
    30.   position: relative;
    31. }
    32.  
    33. .canvasMain .box .canvas {
    34.   margin: 0;
    35. }
    36.  
    37. .canvasMain .box .btn {
    38.   height: 40px;
    39.   width: 280px;
    40.   background-color: rgba(0, 0, 0, 0.3);
    41.   border-radius: 40px;
    42.   color: #fff;
    43.   font-size: 15px;
    44. }
    45.  
    46. .canvasMain .box .btn {
    47.   margin: 10px 0;
    48.   padding-left: 0;
    49.   padding-right: 0;
    50. }
    51.  
    52. .canvasMain .box .iconfont {
    53.   font-size: 46rpx;
    54.   color: #fff;
    55. }
    56. style>

    三、index.js

    1. 	data() {
    2. 		return {
    3. 			posterDatas: {
    4. 				width: 285, //画布宽度
    5. 				height: 406, //画布高度
    6. 				buttonType: 1,
    7. 				hidden: false, // 是否隐藏海报弹窗
    8. 				success: false, // 是否成功生成过海报
    9. 			},
    10. 			canvasId: 'firstCanvas',
    11. 			canvasStyle: 'width: 285px; height: 406px;', // 根据实际需要设置 canvas 的宽高
    12. 		};
    13. 	},
    14.     
    15.     	//海报生成配置
    16. 		posterSetCanvas() {
    17. 			var that = this
    18. 			var posterDatas = that.posterDatas;
    19. 			var tempConfig = that.tempConfig;
    20. 			//展示海报弹窗
    21. 			that.posterDatas.hidden = true;
    22. 			util.showLoading('生成中');
    23. 			var userInfo = wx.getStorageSync('userInfo') || {};
    24.  
    25. 			var Datas = {};
    26. 			Datas.i = 0;
    27. 			Datas.callback_Datas = [];
    28. 			Datas.data = [];
    29. 			Datas.data[0] = userInfo.touimg; //头像
    30. 			Datas.data[1] = app.globalData.swtCircle + "/mp_ewm_v2.php?act=getwxacode&tjrhao=" + (userInfo
    31. 				.tjrhao || '') + "&url=pages/home/home"; //小程序码
    32. 			util.canvasImage(that, Datas, function(that, canvasImage_arr) {
    33. 				//要延时执行的代码
    34. 				setTimeout(function() {
    35. 					//预处理画布网络地址图片
    36. 					var ctx = uni.createCanvasContext(that.canvasId, that);
    37. 					// 清除背景
    38. 					//ctx.clearRect(0, 0, posterDatas.width, posterDatas.height);
    39. 					// 绘制背景
    40. 					// ctx.fillStyle = "#fff";
    41. 					// ctx.fillRect(0, 0, posterDatas.width, posterDatas.height);
    42. 					var bgImg = '/static/images/yao_bj.png';
    43. 					// 绘制背景图
    44. 					ctx.drawImage(bgImg, 0, 0, posterDatas.width, posterDatas.height);
    45.  
    46. 					//简介
    47. 					util.fillTextLineBreak(ctx, "邀请您使用" + tempConfig.appMain.name + "小程序", 100, 81, 150,
    48. 						20, '#fff',
    49. 						13);
    50. 					//标题文字
    51. 					ctx.font = "bold 18px PingFang SC";
    52. 					ctx.fillStyle = "#fff";
    53. 					ctx.textAlign = "start";
    54. 					ctx.fillText(userInfo.nickName_hai, 100, 60);
    55.  
    56. 					util.roundRect(ctx, canvasImage_arr[0], 30, 35, 56, 56, 28);
    57.  
    58. 					ctx.font = "bold 18px PingFang SC";
    59. 					ctx.fillStyle = "#0D7239";
    60. 					ctx.textAlign = "start";
    61. 					ctx.fillText('分享有礼 荐者有份', 70, 170);
    62.  
    63. 					ctx.drawImage(canvasImage_arr[1], 65, 200, 160, 160);
    64. 					ctx.draw();
    65. 					wx.hideLoading();
    66.  
    67. 				}, 200)
    68. 			});
    69. 		},
    70.  
    71. 		//海报下载图片
    72. 		posterDownImage: function() {
    73. 			var that = this
    74. 			util.showLoading('保存中');
    75. 			var posterDatas = that.posterDatas
    76. 			uni.canvasToTempFilePath({
    77. 				canvasId: "firstCanvas",
    78. 				success(res) {
    79. 					console.log(res)
    80. 					wx.showToast({
    81. 						icon: 'none',
    82. 						title: '已保存到相册，快去分享吧',
    83. 					})
    84. 					posterDatas["buttonType"] = 2;
    85. 					that.posterDatas = posterDatas;
    86.  
    87. 					// 在 h5 中，res.tempFilePath 返回的是 base64 类型要处理，通过 a 标签的形式下载
    88. 					var arr = res.tempFilePath.split(',');
    89. 					var bytes = atob(arr[1]);
    90. 					let ab = new ArrayBuffer(bytes.length);
    91. 					let ia = new Uint8Array(ab);
    92. 					for (let i = 0; i < bytes.length; i++) {
    93. 						ia[i] = bytes.charCodeAt(i);
    94. 					}
    95. 					var blob = new Blob([ab], {
    96. 						type: 'application/octet-stream'
    97. 					});
    98. 					var url = URL.createObjectURL(blob);
    99. 					var a = document.createElement('a');
    100. 					a.href = url;
    101. 					a.download = new Date().valueOf() + ".png";
    102. 					var e = document.createEvent('MouseEvents');
    103. 					e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false,
    104. 						false, 0, null);
    105. 					a.dispatchEvent(e);
    106. 					URL.revokeObjectURL(url);
    107. 				},
    108. 				fail(e) {
    109. 					console.log(e, "fail");
    110. 					util.showToast('保存失败，稍后再试”', 'none');
    111. 					that.posterHideCanvas();
    112. 				}
    113. 			})
    114. 		},
    115.  
    116. 		//海报隐藏弹窗
    117. 		posterHideCanvas: function() {
    118. 			var that = this;
    119. 			that.posterDatas.buttonType = 1;
    120. 			that.posterDatas.hidden = false;
    121. 		},
    122.  
    123. 		//海报弹窗禁止屏幕滚动
    124. 		posterTouchMove: function() {
    125. 			//在蒙层加上 catchtouchmove 事件
    126. 			//这里什么都不要放
    127. 		},

    四、最终结果

  • 相关阅读:
    Unity UI Toolkit学习笔记-EditorWindow
    第一章 教育基础（05 小学教育研究）
    cv面试百问day3
    代替forever下一个部署node的持久化工具---pm2
    python3.9 处理excel来实现类似excel中的vlookup功能
    Vue指令综合案例——汽车品牌管理
    Python——LRU_Cache
    [免费专栏] ATTACK安全之Android车机证书攻击(入侵)场景检测【一】
    gin框架再探
    Git入门
  • 原文地址：https://blog.csdn.net/weixin_44936767/article/details/132838452