创建2个canvas,一个使用ctx.scale(0.5,0.5)缩放用于展示,一个不缩放透明隐藏,保存图片的用隐藏的canvas就可以,如下代码: <view class="canvas-wrap"><canvas canvas-id="canvasScale" class="banner-img" style="width:750px;height:1000px;"></canvas><canvas canvas-id="canvas_hd" class="banner-img" style="width:750px;height:1000px;opacity: 0;"></canvas></view>
canvas真机下scale不起作用,无法缩放显示的问题transform: scale(0.2); 在真机下不起作用,在图片和小程序码合成应用中,需要实现在页面上显示320*640导出尺寸720*1280,测试发现导出是根据画布大小决定的,canvas如果按实际导出尺寸设置就会超过屏幕体验非常不好。 尝试决绝方法1: js里设置ctx.scale(0.2, 0.2) 结果只是吧画布里的内容缩放了图片导出还是画布大小,而且因为缩小了内容导致画布很大地方空白。 尝试方法2: 设置实际导出大小*2,但是这样图片会模糊 [代码]wx.canvasToTempFilePath({[代码] [代码] [代码][代码]width: w,[代码] [代码] [代码][代码]height: h,[代码] [代码] [代码][代码]destWidth: w * 2,[代码] [代码] [代码][代码]destHeight: h * 2,[代码] [代码] [代码][代码]canvasId: 'canvas_course',[代码] [代码] [代码][代码]success: (res) => {[代码] [代码] [代码][代码]this.data.canvas = res.tempFilePath[代码] [代码] [代码][代码]wx.hideLoading()[代码] [代码] [代码][代码]}[代码] [代码]})[代码] 尝试方法3: 设置画布的transform: scale属性,在开发工具上测试是可以达到预期效果,但是在真机上scale不起作用 [代码]canvas {[代码] [代码] [代码][代码]width[代码][代码]: [代码][代码]720px[代码][代码];[代码] [代码] [代码][代码]height[代码][代码]: [代码][代码]1280px[代码][代码];[代码] [代码] [代码][代码]transform: scale([代码][代码]0.2[代码][代码]);[代码] [代码] [代码][代码]transform-origin: [代码][代码]left[代码] [代码]top[代码][代码];[代码] [代码]}[代码]
2021-03-02