你好,遇到同样的问题,有解决方案了吗
PC端canvas2d,scale缩放后wx.canvasToTempFilePath生成图片不对?Canvas2D,根据像素比使用scale缩放后,用wx.canvasToTempFilePath生成图片,在PC端会导致生成的图片不完整。请管理员大大指教! canvas.width = canvasWidth*this.data.dpr canvas.height = canvasHeight*this.data.dpr ctx.scale(this.data.dpr, this.data.dpr) // 根据像素比放大 1.开发工具和手机端正确:能完整生成全图。 [图片] 2.PC端同样代码,无法生成完整全图。 [图片] 代码片段:https://developers.weixin.qq.com/s/IW9zr9mJ73Pj 主要代码: const app = getApp() const sysInfo = wx.getSystemInfoSync() // 获取设备信息 Page({ data: { dpr: sysInfo.pixelRatio, canvasWidth: 750, canvasHeight: 421.875, // 默认16:9 fileCoverHttpUrl: 'https://jszs.ds.net.cn/api/file7/ccw/temp/2023-07-24/1522147391/3e22c349259b2d9000b8d7c2d93d7314.mp4?ss=0.1', }, onLoad() { }, handleDraw() { const {fileCoverHttpUrl} = this.data; let imagePath = ''; this.createCanvas().then(async () => { const coverImageInfo = await wx.getImageInfo({ src: fileCoverHttpUrl, }) const {path, width, height} = coverImageInfo; imagePath = path; // 临时路径 this.loadImg(imagePath).then(img => { this.drawMedia(img); }) }); }, drawMedia(media) { const {canvas, ctx} = this; const {canvasWidth, canvasHeight} = this.data; console.log('drawMedia', canvasWidth, canvasHeight); canvas.width = canvasWidth*this.data.dpr canvas.height = canvasHeight*this.data.dpr ctx.scale(this.data.dpr, this.data.dpr) // 根据像素比放大 ctx.drawImage(media, 0, 0, canvasWidth, canvasHeight); // 延时生成图片 setTimeout(() => { wx.canvasToTempFilePath({ canvas: canvas, x: 0, y: 0, width: canvasWidth*this.data.dpr, height: canvasHeight*this.data.dpr, destWidth: canvasWidth, // 输出的图片的宽度 destHeight: canvasHeight, success: res => { wx.hideLoading(); this.setData({ showPoster: true, tempShareImg: res.tempFilePath, }); }, fail: () => { wx.showToast({ title: '图片生成失败~', icon: 'none' }); } }) }, 300) }, createCanvas() { return new Promise(resolve => { wx.createSelectorQuery() .select('#canvas') .fields({ node: true, size: true }) .exec((res) => { const {canvasWidth, canvasHeight} = this.data; const canvas = res[0].node; const ctx = canvas.getContext('2d'); canvas.width = canvasWidth; canvas.height = canvasHeight; ctx.clearRect(0, 0, canvasWidth, canvasHeight) this.canvas = canvas; this.ctx = ctx; resolve(); }) }) }, loadImg(src){ return new Promise((resolve, reject) => { const {canvas} = this; const image = canvas.createImage() image.src = src image.onload = () => { resolve(image) } image.onerror = () => { reject(new Error(`fail to fetch image form: ${src}`)) } }) }, })
09-14