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)
&nbsp; &nbsp; &nbsp; &nbsp; for(let i = 1; (i-1)*20 < content1.length; i++){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let start = 18*(i-1);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let end = 18*i;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillText(content1.substring(start, end), 10, (50+50*i))
&nbsp; &nbsp; &nbsp; &nbsp; }  

            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 就可以 画出来

回复 意念开发创始人: 关于尺寸限制文档有,你绘制这么大的用途是什么?

回到顶部