惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 【当耐特】
小众软件
小众软件
S
SegmentFault 最新的问题
GbyAI
GbyAI
量子位
爱范儿
爱范儿
L
LangChain Blog
Vercel News
Vercel News
A
About on SuperTechFans
腾讯CDC
博客园_首页
酷 壳 – CoolShell
酷 壳 – CoolShell
月光博客
月光博客
博客园 - 聂微东
Stack Overflow Blog
Stack Overflow Blog
H
Help Net Security
U
Unit 42
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
V
V2EX
V
Visual Studio Blog
美团技术团队
D
DataBreaches.Net
The GitHub Blog
The GitHub Blog
N
Netflix TechBlog - Medium

博客园 - 辰

【破解】webix 9.1.6 试用版 弹窗提示破解教程 【经验】微信小程序Canvas 的画图尺寸学习研究。 [入门到吐槽系列] 微信小程序 上传图片 前端压缩 保存到云存储 使用Canvas新API的巨坑! [入门到吐槽系列] 微信小程序 敏感违规图片检测 mediaCheckAsync,客服接口 消息推送 的各种坑分享! [突发救援] 网站突发被腾讯云因未备案 屏蔽,60分钟内抢救恢复成功! [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用 [入门到吐槽系列] Webix 10分钟入门 一 管理后台制作 租了一台华为云耀云服务器,却直接被封公网ip,而且是官方的bug导致! 从事游戏行业也有10年,让我来说下游戏的本质,为什么上瘾。 Egret 生成 自带EUI 的微信小游戏 踩坑! JMeter入门 像屎一样的 Spring Boot入门,总算有反应了 亲测有效!一种完美动态阈值白平衡算法 Java实现。 Windows 2008 - 由于管理员设置的策略,该磁盘处于脱机状态 egret调用页面js的方法。 egret GUI 和 egret Wing 是我看到h5 最渣的设计 Egret 集成第三方库 记录 乐高情报站7月份抽奖数据汇总。 今天是第二个最值得纪念的日子。
【经验】微信小程序 canvas 图片拉伸 对 wx.canvasToTempFile...
· 2022-03-13 · via 博客园 - 辰

前言

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