• 【经验】微信小程序 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

  • 相关阅读:
    Java 中常用的数据源
    Restful风格API接口开发springMVC篇
    Maven的作用到底是什么
    Java中常用的数据源
    数据库死锁问题 及 解决方法
    string中执行sql语句
    提高mysql千万级大数据SQL查询优化30条经验
    JAVA对象转换JSON
    oracle分页查询
    jdk8环境变量 jdk8图解安装 java8安装
  • 原文地址:https://www.cnblogs.com/zc22/p/16000761.html
Copyright © 2020-2023  润新知