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

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

回到顶部