0.1.4 • Published 2 years ago
image-to-sections v0.1.4
Package: image-to-sections
Description:
主要功能:
- 将 大图片做成切片; 提供 横切 和 竖切 两种切片方式; --> getBigImageSectionFiles()
其它功能:
获取图片的缩略图; --> imageFileToThumbFile()
获取图片的 canvas dom 对象; --> imageToCanvas()
获取图片的 canvas 切片数组; --> getImageCanvasSections()
获取图片的 canvas 横向切片数组; --> getImageCanvasSectionsH()
获取图片的 canvas 纵向切片数组; --> getImageCanvasSectionsV()
canvas 对象转为 blob 二进制数据; --> canvasToBlob()
canvas 对象转为 image file; --> canvasToImageFile()
Usage:
安装:
npm install image-to-sections --save
整体引入:
export imageToSection from 'image-to-sections'
按需引入:
export { getBigImageSectionFiles } from 'image-to-sections'
Methods Introduction:
- getBigImageSectionFiles(imageFile, options={})
/** * @description: 获取大图片File, 的切片后的 Files: [file, file, ...] * * @param {Image} imageFile: 图片 File 对象 * * @param {Object} options * sectionWidth: 切片宽度; 默认: 750 * sectionHeight: 切片高度; 默认: 100 * cutDirection: 描述:图片的切向; * 可选: 'horizontal'<横切> | 'vertical'<纵切>; * 默认: 'horizontal'; * allowZoom: 描述:是否允许缩放;可选:true | false; 默认: false; 为 true 时: 图片成比例缩放之后,再进行切分; * * @introduction 1. 当 cutDirection==='horizontal' 时,sectionHeight 起作用,sectionWidth 不起作用 * 2. 当 cutDirection==='vertical' 时,sectionHeight 不起作用,sectionWidth 起作用 * 3. 当为 allowZoom===true 时,sectionWidth 和 sectionHeight 都会生效; * * @return {Array} fileList: [File, ...] */
- imageFileToThumbFile(imageFile, options={})
/** * @desction 获取 image file 的缩略图的 file 文件 * * @param {File} imageFile: 图片 File 对象 * * @param {Object} options * thumbWidth: 缩略的宽度 * thumbHeight: 缩略图的高度 * * @introduction 1. 当 options.thumbWidth && options.thumbHeight 时,缩略图以 options.thumbWidth 为基准进行等比缩放 * 2. 当 options.thumbWidth && !options.thumbHeight 时,缩略图以 options.thumbWidth 为基准进行等比缩放 * 3. 当 !options.thumbWidth && options.thumbHeight 时,缩略图以 options.thumbHeight 为基准进行等比缩放 * 4. 当 !options.thumbWidth && !options.thumbHeight 时, 缩略图即为当前图片的大小 * * @return {File} thumbFile: 缩略图的 File 对象 */
- imageToCanvas(loadedImage, options={})
/** * @description 图片 img 转为 canvas,并获取其 canvas dom 对象 * * @param {Image } loadedImage * * @param {Object} options * canvWidth: canvas 的宽度; 默认: 0; * canvHeight: canvas 的高度; 默认: 0; * distorted: 是否允许失真;默认: false; * * @return {Canvas} canvas */
- getImageCanvasSections(loadedImage, options={})
/** * @description 获取图片 loadedImage 的 canvas 切片数组 * * @param {Image} loadedImage: 已加载的 image 对象 * * @param {Object} options * sectionWidth: 切片宽度; 默认: 750 * sectionHeight: 切片高度; 默认: 100 * cutDirection: 描述:图片的切向; * 可选: 'horizontal'<横切> | 'vertical'<纵切> ; * 默认: 'horizontal'; * * @introduction 1. 当 cutDirection==='horizontal' 时,sectionHeight 起作用,sectionWidth 不起作用 * 2. 当 cutDirection==='vertical' 时,sectionHeight 不起作用,sectionWidth 起作用 * * @returns {Array} canvasSections: [<canvas>, ...] */
- getImageCanvasSectionsH(loadedImage, canvasHeight)
/** * @description 获取图片 img 的 横切后的 canvas 切片数组 * * @param {Image } loadedImage 【加载完成的目标图片对象】 * * @param {Number} canvasHeight 【canvas 切片的高度】 * * @return {Array} canvasArray: [<canvas>, ...] */
- getImageCanvasSectionsV(loadedImage, canvasWidth)
/** * @description 获取图片 img 的 纵切后的 canvas 切片数组 * * @param {Image } loadedImage 【加载完成的目标图片对象】 * * @param {Number} canvasWidth 【canvas 切片的宽度】 * * @return {Array} canvasArray: [<canvas>, ...] */
- canvasToBlob (canvasObj, transType, transQuality)
/** * @decription: canvas 转成 blob 二进制 * * @param {Canvas} canvasObj * * @param {String} transType: 要转成的文件类型, * 可选:'image/jpg' | 'image/jpeg' | 'image/png'; * 默认:'image/png'; * * @param {Number} transQuality: 图片品质;可选:0--1; 默认: 1 * * @returns {Promise} promise */
- canvasToImageFile(canvasObj, options={})
/** * @description: 将 canvas 对象转为 imageFile * @param {Object} canvasObj * @param {Object} options * transType: 要转为的 image 格式; * transQuality: 图片质量; 可选: 0-1;默认: 1; * imageName: 转成图片的名字;默认: 'image-file' * suffix: 图片格式 后缀; 默认: 'png'; * lastModified: 自定义最后修改时间;默认: Date.now() * @returns {Promise} promise: resolve(imageFile) */