Node.js——切图

简介: Node.js——切图

安装



# 建一个文件
npm init 
# 安装两个依赖
npm i image-size sharp


代码



const sizeOf = require('image-size');
const sharp = require('sharp');
const currentImageInfo = sizeOf('./wallhaven-3zwvk3.jpg') // 加载一张图
let clientHeight = currentImageInfo.height
console.log(currentImageInfo)
const heights = []
const SPLIT_HEIGHT = 200
while (clientHeight > 0) {
    // 切图高度充足时
    if (clientHeight >= SPLIT_HEIGHT) {
        heights.push(SPLIT_HEIGHT)
        clientHeight -= SPLIT_HEIGHT
    } else {
        // 切割高度不够时,直接切成一张
        heights.push(clientHeight)
        clientHeight = 0
    }
}
console.log(heights)
let top = 0
heights.forEach((h, index) => {
    sharp('./wallhaven-3zwvk3.jpg')
        .extract({ left: 0, top: top, width: currentImageInfo.width, height: h })
        .toFile(`./img/split_${index + 1}_block.jpg`, (err, info) => {
            if(!err){
                onsole.log(`split_${index + 1}_block.jpg切割成功`)
            }else{
                console.log(JSON.stringify(err), 'error')
            }
        })
    top += h
})


执行



node index.js


image.png

扩展


sharp


一个利用高速node.js将普通大图片转换成更小的、对web更友好的JPEG、PNG、WebP等不同尺寸的图像的出色的模块。调整图像大小通常比使用最快的ImageMagick和GraphicsMagick设置还要快4到5倍

extract


提取图像的一个区域


  • left 从左边缘开始的零索引偏移量
  • top zero-indexed offset from top edge
  • width 提取图像的宽度
  • height 提取图像的高度


toFile


将输出图像数据写入文件。


如果没有选择输出格式,将从扩展中推断它,支持JPEG、PNG、WebP、TIFF、DZI和libvip的V格式。注意,原始像素数据只支持缓冲区输出。


未提供回调时,将返回Promise


  • fileOut (String) 写入图像数据的路径
  • callback (Function) 在完成时调用,带有两个参数(err, info)。info包含输出图像格式、大小(字节)、宽度、高度、通道和预乘(指示是否使用预乘)。在使用裁剪策略时还
  • 包含cropOffsetLeft和cropOffsetTop


示列
.toFile(`./img/split_${index + 1}_block.jpg`, (err, info) => {
    if (!err) {
        onsole.log(`split_${index + 1}_block.jpg切割成功`)
    } else {
        console.log(JSON.stringify(err), 'error')
    }
})
.toFile(`./img/split_${index + 1}_block.jpg`).then(info => {
    console.log(`split_${index + 1}_block.jpg切割成功`)
}).catch(err => {
    console.log(JSON.stringify(err), 'error')
})
sharp.js中文文档
image-size.js文档


Nodejs中为什么require不能直接引入图片?



const img = require('./wallhaven-3zwvk3.jpg');


用node执行这段代码,会报错,就引发了标题所问


require能加载.js,.json,.node的扩展名,这个node的加载模块机制有关。


我经常写Vue,在Vue中是可以用的,是因为vue使用了webpack,webpack会将识别require或者import将其转换成自己的webpack模块,比如require转换成

__webpack_require__。


但是webpack只能识别JS,所以webpack有个重要的概念Loader,通过file-loader或者url-loader就能识别非js的图片文件。


相关文章
|
5月前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
78 4
|
7月前
|
JSON JavaScript 前端开发
Node.JS第二讲笔记
Node.JS第二讲笔记
|
SQL JavaScript 前端开发
Node.js笔记总结(day5)(二)
Node.js笔记总结(day5)(二)
144 0
Node.js笔记总结(day5)(二)
|
JSON 前端开发 JavaScript
Node.js笔记总结(day6)(二)
Node.js笔记总结(day6)(二)
136 0
Node.js笔记总结(day6)(二)
|
SQL 存储 NoSQL
Node.js笔记总结(day5)(一)
Node.js笔记总结(day5)
159 0
Node.js笔记总结(day5)(一)
|
JSON JavaScript 前端开发
Node.js笔记总结(day4)(一)
Node.js笔记总结(day4)
78 0
Node.js笔记总结(day4)(一)
|
存储 数据采集 JSON
Node.js笔记总结(day6)(一)
Node.js笔记总结(day6)
138 0
Node.js笔记总结(day6)(一)
|
JSON JavaScript 前端开发
Node.js笔记总结(day4)(二)
Node.js笔记总结(day4)(二)
111 0
Node.js笔记总结(day4)(二)
|
存储 JavaScript 程序员
Node.js笔记总结(day2)(二)
Node.js笔记总结(day2)(二)
125 0
Node.js笔记总结(day2)(二)
|
缓存 开发框架 JSON
Node.js笔记总结(day3)(二)
Node.js笔记总结(day3)(二)
174 0
Node.js笔记总结(day3)(二)