const drawLine = () => {
let ctx = uni.createCanvasContext('wrapper', instance)
ctx.setLineWidth(1)
ctx.setStrokeStyle('#999')
ctx.moveTo(0, 0)
ctx.beginPath()
//循环坐标数组进行画线
props.coordinatesArr.forEach((item, i) => {
ctx.lineTo(props.coordinatesArr[i].x, props.coordinatesArr[i].y)
ctx.stroke()
})
ctx.closePath()
ctx.draw(false, function () {
uni.canvasToTempFilePath(
{
canvasId: 'wrapper',
quality: 1,
fileType: 'png',
success: function (res) {
console.log(res)
// 在H5平台下,tempFilePath 为 base64
//保存画布地址
let resUrl = res.tempFilePath
imgUrl.value = resUrl
console.log(resUrl)
},
fail(res) {
console.log(res)
tip = res
uni.showToast({
icon: 'error',
title: '画图失败'
})
}
},
instance
)
})
}
- 发布:2024-03-20 11:11
- 更新:2024-03-20 11:11
- 阅读:185
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22631.3296
浏览器平台: Chrome
浏览器版本: 122.0.6261.129
项目创建方式: CLI
CLI版本号: ^3.2.45
示例代码:
操作步骤:
canvas画图导出图片ios空白
canvas画图导出图片ios空白
预期结果:
iOS图片显示正常
iOS图片显示正常
实际结果:
ios端显示空白
ios端显示空白
bug描述:
h5端进入页面先用canvas画图,画完再调用uni.canvasToTempFilePath生成图片,图片生成后电脑谷歌浏览器上、微信开发者工具、安卓手机上显示正常,ios苹果手机显示空白,uni.canvasToTempFilePath成功回调的图片地址为:data:,
0 个回复