使用这些工具，提高工作效率！🎃 十月精选推荐
欢迎来到十月图书馆精选！
让我们用一份有趣的图书馆清单来开启🍁秋季🍁，这些图书馆可供我们在项目中使用。
Moveable 允许对目标元素应用不同的变换：
下面的示例允许旋转选定的元素：
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: document.querySelector(".target"),
rotatable: true,
throttleRotate: 0,
rotationPosition: "top",
});
const frame = {
rotate: 0,
};
moveable.on("rotateStart", ({ set }) => {
set(frame.rotate);
}).on("rotate", ({ target, beforeRotate }) => {
frame.rotate = beforeRotate;
target.style.transform = `rotate(${beforeRotate}deg)`;
}).on("rotateEnd", ({ target, isDrag, clientX, clientY }) => {
console.log("onRotateEnd", target, isDrag);
});
不妨试一试，测试更多功能：
Rough.js是一个图形库，允许以手绘风格绘制形状。我们可以使用一系列函数来绘制线条、曲线和其他形状。
虽然它可能不太适合某些需要更简洁布局的商业项目，但它可以为原型和应用程序内容增添别样的风格。
使用方法非常简单：
const rc = rough.canvas(document.getElementById('canvas'));
rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
fill: "rgb(10,150,10)",
fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
fill: 'red',
hachureAngle: 60, // angle of hachure,
hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
fill: 'rgba(255,0,200,0.2)',
fillStyle: 'solid' // solid fill
});
上面的代码创建了一组填充形状：
访问他们的网站了解更多信息：
Tesseract.js是流行的 Tesseract OCR 引擎的纯 Javascript 版本。
该库支持超过 100 种语言，具备自动文本方向和脚本检测功能，并提供简洁的界面来读取段落、单词和字符的边界框。Tesseract.js 既可以在浏览器中运行，也可以在运行 NodeJS 的服务器上运行。
在上一篇文章中，我们了解了Removebg一个可以去除照片背景的库。
今天我们将学习如何使用 Tesseract 从给定的图片中提取文本。
如下图所示：
该库提供的输出结果如下，非常准确：
然而，在我进行的其他一些测试中——使用背景渐变和不太清晰的字体——结果并不总是很好：
有些单词被正确识别，但另一些单词则完全丢失了：
可能该库最擅长处理文档照片，因为背景图案和其他元素似乎会改变最终结果。
以下是处理文本图像的代码示例：
import { createWorker } from 'tesseract.js';
const worker = createWorker({
logger: m => console.log(m)
});
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
console.log(text);
await worker.terminate();
})();
任何开发者迟早都会遇到需要解析电子表格文档数据的任务😥。有些情况下，我们可以不用任何第三方库就能完成这项任务。
但在其他情况下，如果有一个工具集成了多种处理 CSV 文件的功能，那就非常有用。
PapaParse来了！
除了提供 JSON 到 CSV 的双向转换之外，它还提供其他一些实用功能，例如：
- 自动检测分隔符
- 接受远程文件
- 跳过文档中的后续评论
- 多线程
希望 PapaParse 能让您下次处理 CSV 文件时更轻松一些🎉
BigPicture 是一款轻量级（gzip 压缩后仅 3.5 KB）且与框架无关的 JavaScript 图片和视频查看器。它开箱即用，提供加载指示器和字幕，让创建媒体库变得轻而易举。
当您想要打开某个元素时，请将包含要开始动画的元素的对象传递给 BigPicture，并根据您想要执行的操作，传递一个可选的第二个参数。
因此，如果我们想要引用一个 YouTube 视频，我们需要提供视频 ID 和触发叠加层的元素。例如，视频https://www.youtube.com/watch?v=dFoxnBf7_wQ：
var BigPicture = require('bigpicture')
BigPicture({
el: this, // The element triggering the overlay
ytSrc: 'dFoxnBf7_wQ'
})
如果我们想展示一个照片库：
var unsplashImages = ['meiying', 'clemono2', 'heftiba'].map(function(user) {
return {
src: 'https://source.unsplash.com/user/' + user + '/daily'
caption: 'Here I can add my caption...'
}
});
BigPicture({
el: this,
gallery: unsplashImages
})
希望您喜欢本月的精选商品。敬请期待十一月的新品！
