前言

今天将解决 transform导致文字 的模糊问题。 那么？什么时候会触发这种问题呢？在 Google 上，其实我们能搜到非常多类似的案例，总结而言：

一、当文本元素的某个祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作时，容易出现这种问题

当然，这只是必要条件，不是充分条件。继续深入探究，会发现，必须还得同时满足一些其它条件：

二、元素作用了 transform: translate() 或者 transform: scale() 后的计算值产生了非整数

例如：

.container {
    position: absolute;
    width: 1104px; 
    height: 475px;
    top: 50%;
    transform: translateY(-50%);
    // ...
}

由于元素的高度为 475px，translateY(-50%) 等于 237.5px，非整数，才导致了内部的字体模糊。

但是，需要注意的是，并非所有产生的非整数都会导致了内部的字体模糊。

三、文本内容是否模糊还与屏幕有关，高清屏（dpr > 2）下不容易触发，更多发生在普通屏幕下（dpr = 1）

前言

之前讲解过psd文件上传，今天分享一下如何解析文字特效，字体大小，字体等等，顺便讲解如何解析路径。

Font-size字体大小

上一节关于矩阵,我已经写了psdjs关于字体解析的transform矩阵，因此，我们可以根据这个矩阵计算出ps里面字体的大小。

解析字体大小的流程：

第一步：取出sizes里面的最大值，psd解析sizes是一个数组，因为ps里面可以针对一个文本框文字设置不同的字体大小，假如你解析可以支持不同字体大小的解析，可以根据length和sizes，或者文本框里面每个文字的字体大小，假如不那么精准，可以获取其中最大的一个就可以了。

第二步：通过上一节里面的矩阵，或者字体的变化大小 Math.round(fsize * item.text.transform.yy)

第三步：纠正，假如解析的字体大于文本框高度，或者小于文本框的一半，那么字体大小应该还是有问题的，可以进一步纠正，可以在字体大于图层的高度的时候，设置字体高度为图层高度。

关于Matrix

我们先看看chatGpt是如何介绍矩阵的。

矩阵是数学中的一个概念，它是由数字按照矩形排列而成的矩形阵列。矩阵由行和列组成，行表示矩阵的水平方向，列表示矩阵的垂直方向。

一个矩阵可以用以下形式表示：

A = [a11, a12, a13, ..., a1n]
    [a21, a22, a23, ..., a2n]
    [a31, a32, a33, ..., a3n]
    ...
    [am1, am2, am3, ..., amn]

其中，a11, a12, a13, ..., a1n 表示第一行的元素，a21, a22, a23, ..., a2n 表示第二行的元素，以此类推，am1, am2, am3, ..., amn 表示第 m 行的元素。

关于getImageData

ctx.getImageData()，可以获取canvas的data图片数据，这个图片数据返回的data是一个对象，该对象包含指定的 ImageData 对象的图像数据。 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

ImageData.datalength 可以作这样计算：300（width） X 150(height) X 4（r,g，b，a 4个分量） = 180000

关于getImageData，我之前文章也有写过 https://www.haorooms.com/post/canvas_imageData 里面有利用getImageData，过滤视频纯色背景，吸取视频颜色，防锯齿，图片灰色及反色，图片下载等

今天在这个基础上再补充一些，主要是封装成函数，更方便调用，之前主要是demo案例，大家可以看看这些demo案例https://www.haorooms.com/post/canvas_imageData