使用CanvasContext.drawImage时,在App、小程序、安卓系统H5都正常显示图片,但是在iOS系统H5显示空白(此时图片尺寸为:30244032)。经过测试,当把CanvasContext.drawImage(dx, dy, dWidth, dHeight)内的dWidth和dHeight调到一定尺寸就能正常显示,我使用的固定尺寸:10081344。测试环境信息:iphone 13,iOS16.4.1。
添加水印代码如下
setimg(path){
return new Promise((resolve, reject) => {
let date = this.timeFormat()
uni.getImageInfo({
src: path,
success: res => {
console.log(res)
// this.img = res
this.canvasSiz.width = 1008;
this.canvasSiz.height = 1344;
//初始化画布
// #ifdef APP-PLUS || H5
const ctx = uni.createCanvasContext('canvas-clipper', this);
ctx.setFillStyle('#00ffff')
ctx.fillRect(0, 0, this.canvasSiz.width, this.canvasSiz.height);
ctx.drawImage(res.path, 0, 0, this.canvasSiz.width, this.canvasSiz.height);
ctx.setFontSize(40);
ctx.setFillStyle('#ff0000');
let textToWidth = this.canvasSiz.width/2-160;
let textToHeight = this.canvasSiz.height-50;
ctx.fillText(date, textToWidth, textToHeight);
setTimeout(() => {
ctx.draw(false, () => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'canvas-clipper',
x: 0,
y: 0,
width: this.canvasSiz.width,
height: this.canvasSiz.height,
destWidth: this.canvasSiz.width,
destHeight: this.canvasSiz.height,
success: ress => {
// #ifdef H5
resolve(ress.tempFilePath)
// #endif
// #ifndef H5
uni.saveImageToPhotosAlbum({//保存到手机
filePath: ress.tempFilePath,
success: (res1) => {
resolve(res1.path)
}
})
// #endif
},
fail: (err) => {
console.log(err);
}
});
}, 500);
});
},100);
// #endif
// #ifdef MP-WEIXIN
const query = wx.createSelectorQuery().in(this) // 创建一个dom元素节点查询器
query.select('#canvas-clipper')
.fields({ // 需要获取的节点相关信息
node: true, // 是否返回节点对应的 Node 实例
size: true // 是否返回节点尺寸(width height)
}).exec((res1) => {
// console.log(res1)
const canvas = res1[0].node // canvas就是我们要操作的画布节点
const ctx = canvas.getContext('2d') // 以2d模式,获取一个画布节点的上下文对象
// 不加这段,矩形底部会显示不全,我还没看懂
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res.width dpr
canvas.height = res.height dpr
ctx.scale(dpr, dpr)
let img = canvas.createImage()
img.src = path
img.onload = function(){
ctx.drawImage(img, 0, 0,res.width, res.height);
ctx.fillStyle = '#ff0000'
ctx.font = 'bold 68px serif'
let textToWidth = res.width/2-260;
let textToHeight = res.height-50;
ctx.fillText(date, textToWidth, textToHeight);
wx.canvasToTempFilePath({
canvas: canvas,
x: 0,
y: 0,
width: res.width,
height: res.height,
destWidth: res.width,
destHeight: res.height,
success(res2) {
uni.saveImageToPhotosAlbum({//保存到手机
filePath: res2.tempFilePath,
success: (res3) => {
resolve(res2.tempFilePath)
}
})
}
})
}
img.onerror = function(err){
console.log(err)
}
})
// #endif
},
fail: (err) => {
console.log(err);
}
});
})
},

北凉年哥
- 发布:2023-05-18 10:55
- 更新:2023-05-18 10:55
- 阅读:1092
CanvasContext.drawImage iOS系统H5端图片空白
分类:uni-app
0 个评论
要回复文章请先登录或注册