收藏
回答

canvasToTempFilePath这个Api在Canvas里转的文件不能显示吗?

https://developers.weixin.qq.com/community/develop/doc/000206085a81e05fef1e87ec851400

看见之前反馈过

ios安卓开发者工具都正常,真机模拟(pc小程序)和pc小程序时候都空白,看显示wxfile://temp/地址

回答关注问题邀请回答
收藏

2 个回答

  • 周冉
    周冉
    05-15

    图片太大导致的,把图片缩小试试。还不行的话一句句调试,看看哪步导致画不出来了。

    05-15
    有用
    回复 1
    • Han.
      Han.
      05-15
      我里面没有图片呀....只画了圆,而且尺寸只有150*150,手机上也正常,只有Pc,感觉是canvasToTempFilePath的问题。
      05-15
      回复
  • Han.
    Han.
    05-15
    const drawCanvas = (canvasId, data) => {
    	uni.createSelectorQuery().select(canvasId).fields({
    		node: true,
    		size: true
    	}).exec(res => {
    		// 处理数据
    		demoList[0].value = data.levelOne ?? 0
    		demoList[1].value = data.levelTwo ?? 0
    		demoList[2].value = data.levelThree ?? 0
    		const {
    			devicePixelRatio,
    			screenWidth
    		} = uni.getSystemInfoSync()
    		const rpx = devicePixelRatio
    		const canvas = res[0].node
    		let ctx = canvas.getContext('2d')
    		// 初始化画布大小
    		canvas.width = res[0].width * rpx
    		canvas.height = res[0].height * rpx
    		// 获取结束
    		const x = res[0].width / 2 * rpx;
    		const y = res[0].height / 2 * rpx;
    		const lineWidth = 20 * rpx;
    		const radius = (res[0].height / 2) * rpx - (lineWidth / 2) // 半径
    		const sumResult = canvasId === '#chart' ? data.errorTotal : data.alertTotal;
    		let startAngle = 0;
    		demoList.map(item => {
    			// 绘制数组中的百分比
    			ctx.beginPath();
    			console.log('sum', sumResult)
    			let angle = (item.value / sumResult) * 2 * Math.PI
    			ctx.arc(x, y, radius, startAngle, startAngle + angle);
    			ctx.lineWidth = lineWidth;
    			ctx.strokeStyle = item.color;
    			ctx.stroke();
    			startAngle += angle
    		})
    		// 文字颜色
    		ctx.fillStyle = "#1D2129"
    		ctx.font = `${30 * rpx}px sans-serif`
    		ctx.textAlign = 'center'
    		// // 文字位置
    		// // 插入文字
    		ctx.fillText(sumResult, canvas.width / 2, y)
    		// // 文字大小
    		ctx.fillStyle = "#86909C"
    		ctx.font = `${12 * rpx}px sans-serif`
    		ctx.textAlign = 'center'
    		// // 文字颜色
    		// // 插入文字
    		ctx.fillText('故障总计(台)', canvas.width / 2, y + (20 * rpx))
    		uni.canvasToTempFilePath({
    			canvas: canvas,
    			success: function(res) {
    				if (canvasId === '#chart') {
    					canvasSrc1.value = res.tempFilePath;
    				} else {
    					canvasSrc2.value = res.tempFilePath;
    				}
    			},
    			fail: function(res) {
    				console.log(222, res)
    			}
    		})
    	})
    }
    
    05-15
    有用
    回复
登录 后发表内容