• 【经验】微信小程序 canvas 图片拉伸 对 wx.canvasToTempFilePath 截图导出的影响。


    前言

    canvas如果图片出现了拉伸,wx.canvasToTempFilePath导出的图片会出现不可预测的奇怪不完整情况。所以咱们研究下。

    接口说明

    https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

    测试用例

    canvas在界面的尺寸:300,300

    图片尺寸:602,397

    截图坐标:0,0,150,150

    模式 none,canvas=界面尺寸,不拉伸

    图片没有完全显示,截图导出的图片正好是canvas 显示部分的100,150.

    模式 scaleToFill,canvas= 图片尺寸,出现拉伸

    截图的尺寸虽然是100x150,但是内容不是50%的画面部分,而是更长了。

    已知 canvas 界面尺寸长度=300,canvas 代码尺寸长度=397

    按照缩放算法,图像数据没有压缩,但是显示压缩了,所以如果宽度不变,高度150,实际上不失真的高度 = 397 * 300 / 602 = 197.840531561461794;

    如果截图的是150,则,实际上实在198,300的 canvas 上进行截图。

    所以如果按照显示高度 = 300,要实现截图50%,则计算出来 x = 150 / 300  * 397 * 300 / 602 = 150 * 397 / 602 = 98.920265780730897

    这样就正确的得到显示部分的截图;

    模式 aspectFit, canvas= 缩放后界面尺寸,图片完整显示

    同样截图 100,150尺寸的图片:

    同样可以看到没有被拉伸,正确截图。 

    腾讯 BUG 发现:

    如果canvas 初始化界面宽度是300,画图前调整为414,则截图输出会出错。

    但是如果一开始初始化就是414,则正确:

    这个问题就是导致了导出的 bug

  • 相关阅读:
    AOP编程之cglib动态代理:进阶一
    16-python基础5-文件读写操作
    13-python基础2-条件和循环
    12-python基础1-python概述
    11-linux基础八-正则表达式
    07-linux基础四-系统监控和硬盘分区
    06-linux基础三-文件操作和系统启动流程
    05-linux基础二-用户和权限操作
    04-linux基础一概述和简单命令
    03-网络通信原理
  • 原文地址:https://www.cnblogs.com/zc22/p/16000761.html
Copyright © 2020-2023  润新知