uni.canvasToTempFilePath 生成的临时路径在iOS端无法显示，或者显示空白

张得比你帅、

于 2024-07-26 15:27:08 发布

阅读量234

点赞数 3

分类专栏： uniapp 文章标签：前端 uni-app

本文链接：https://blog.csdn.net/qq_54030878/article/details/140716764

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

  重点是一定要压缩图片！！！！！

<canvas style="position: absolute;left: -5000px;" :style="{'width':w,'height': h}" canvas-id="firstCanvas"
			ref="mycanvas"></canvas>

			//拍照
			photograph() {
				let _this = this
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					sizeType: ['compressed'], //选择图片的大小
					success(res) {
						let images = res.tempFilePaths;
						//压缩图片大小。必须的！！！！！！！！
						uni.compressImage({
							src: images[0],
							quality: 30,
							width: '40%',
							height: '40%',
							success(res2) {
								uni.getImageInfo({
									src: res2.tempFilePath,
									success: (r) => {
										_this.canvasWather(r, _this.getNowTime_1())

									},
									fail: () => {
										console.log('失败了吗');
									}
								})
							}
						})


					}
				})
			},

		添加水印    _this.getNowTime_1()  这个是我自定义的时间函数，看个人需求

      canvasWather(res, time) {
				const user = uni.getStorageSync('userInfo')
				let that = this;
				let ctx = uni.createCanvasContext('firstCanvas', that);
				that.w = res.width / 2 + 'px';
				that.h = res.height / 2 + 'px';
				uni.showLoading({
					title: '正在上传',
				})
				setTimeout(() => {
					//初始化画布
					ctx.fillRect(0, 0, res.width / 2, res.height / 2);
					// //将图片src放到cancas内，宽高为图片大小
					ctx.drawImage(res.path, 0, 0, res.width / 2, res.height / 2);
					ctx.beginPath()
					ctx.setFontSize(10)
					ctx.setFillStyle('green');
					let firstY = res.height / 2 - 60;
					
					ctx.fillText(`${time}`, 10, firstY + 20)
					ctx.draw(false, () => {
					//
						uni.canvasToTempFilePath({
							canvasId: 'firstCanvas',
							success: (res) => {
								that.saveFile(res);
								uni.hideLoading();
							},
							fail: (err) => {
								console.log("什么问题");
							}
						})
					})

				}, 500)
			},

 保存

    saveFile(res) {
				let _this = this
				uni.saveFile({
					tempFilePath: res.tempFilePath,
					success(r) {
						_this.tempFilePath = r.savedFilePath
						_this.photoList.push(
							r.savedFilePath
						)
					}
				})

			},