uni-app uni.canvasToTempFilePath ios app端返回的图片为空白
uni-app uni.canvasToTempFilePath ios app端返回的图片为空白 产品分类: uniapp/App
| 开发环境属性 | 值 |
|---|---|
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | win 10 专业版64位 18363 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.3.5 |
| 手机系统 | iOS |
| 手机系统版本号 | iOS 14 |
| 手机厂商 | 苹果 |
| 手机机型 | iphone12 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
bug描述:
H5、安卓都能正常执行,ios端执行canvasToTempFilePath方法返回的图片路径为空白
示例代码:
<canvas id="canvas" :style="{width:canvas_width+'px' ,height:canvas_height+'px' }" canvas-id="firstCanvas" ></canvas>
// 照片打水印
imageWatermark (url, canvas_id, width = 100, height = 100,content1,content2,self) {
return new Promise((resolve, reject) => {
/*加上延迟 处理h5 防止为改变dome 大小就开始绘制 会出现图片显示不完整*/
setTimeout(()=>{
const ctx = uni.createCanvasContext(canvas_id, self);
ctx.drawImage(url, 0, 0, width, height );
ctx.setFontSize(50)
ctx.setFillStyle('#ff0000') //水印颜色
let clientIdWidth = 10
let clientIdHeight = 50 //内容2高度
ctx.fillText(content2, clientIdWidth, clientIdHeight)
for(let i = 1; (i-1)*20 < content1.length; i++){
let start = 18*(i-1);
let end = 18*i;
ctx.fillText(content1.substring(start, end), 10, (50+50*i))
}
ctx.draw(false, () => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: canvas_id,
destWidth:width,
destHeight:height,
fileType: 'jpg',
quality: 0.9,
success: (res) => {
console.log(res)
resolve(res.tempFilePath)
},
fail: (err) => {
console.log(err,123)
}
}, self)
},500)
})
},500)
})
},
更多关于uni-app uni.canvasToTempFilePath ios app端返回的图片为空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html
7 回复
先是给图片打水印,打完水印生成图片 返回的图片是空白的 水印也没有
更多关于uni-app uni.canvasToTempFilePath ios app端返回的图片为空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html
<canvas></canvas> 是否可以显示出来?
最后要执行ctx.draw()
已经找到原因了 但不知道如何解决 canvas大小之前是获取的图片大小 ios上画布太大了就显示空白 如果<canvas>宽高 给小一点的固定值 就可以显示
回复 意念开发创始人: 你现在绘制的多大?
回复 DCloud_UNI_GSQ: 现在 我固定死了 宽1200 高1000 就可以 画出来
回复 意念开发创始人: 关于尺寸限制文档有,你绘制这么大的用途是什么?

