什么是 img-using-text
img-using-text 是一个 npm 包，它可以将一张图片转化为 JavaScript 可以直接使用的文本形式。
安装
使用 img-using-text 前，需要先安装该 npm 包。在终端中输入以下命令：
npm install img-using-text
使用
在代码中添加以下代码：
import imgUsingText from 'img-using-text';
const imgUrl = 'https://example.com/image.png'; // 替换成你需要转换的图片地址
imgUsingText.fromUrl(imgUrl).then((text) => {
console.log(text);
});在控制台中，你将看到图片的文本形式输出。如：
data:image/png;base64,iVBORw0KGg...
深度讲解
如果你想深入了解 img-using-text 的原理，可以继续阅读：
img-using-text 的核心功能是将图片转化为 base64 编码形式。base64 是一种将二进制数据转化为 ASCII 字符串的编码方式。使用这种编码方式，可以将图片等二进制文件以文本形式传输。
我们可以使用 JavaScript 中的 canvas，将图片渲染到 canvas 中，然后将 canvas 的文本输出为 base64 编码形式。
-- -------------------- ---- ------- ----- --- - --- -------- --------------- - ------------ -- ------ ------- - -------------------------------- ---------- - -- -- - ----- ------ - --------------------------------- ------------ - ---------- ------------- - ----------- ----- ------- - ------------------------ ---------------------- -- --- ----- ------- - ------------------- -- - ------ ------- --------------------- --
这里，我们使用 img.onload 函数，让图片在加载完成后再进行后续处理。同时，我们还需要处理跨域问题，使用 img.crossOrigin = 'Anonymous' 进行设置。
该方法虽然可以将图片转化为 base64 编码形式，但使用过程比较繁琐。因此，我们使用 npm 包 img-using-text，将其封装起来，使用起来更加方便。
示例代码
你可以使用以下代码进行测试：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-----------------------------
-------
------
--------
------ ------------ ---- -----------------
----- ------ - -------------------------------- -- -------------
---------------------------------------- -- -
------------------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ead81e8991b448dc2aa