Getthumbnail NPM

getThumbnail

功能

获取img标签或者图片链接的blob
getThumbnail方法获取HTMLImageElement的缩略图blob或者base64
urlToBlob方法获取图片链接的缩略图blob或者base64
getVideoSnap方法获取HTMLVideoElement的缩略图blob或者base64

安装

npm i getthumbnail

用法

import { getThumbnail, urlToBlob, getVideoSnap } from "getthumbnail";


const getBolb = async () => {
  const _dom = document.querySelector(".imgClass");
  const _dom_video = document.querySelector(".videoClass");


  const _blob = await getThumbnail({ target: _dom, rate: 0.8 });
  const _blob2 = await urlToBlob({url:"https://xxx.xxx.xxx.jpg", type: "base64", rate: 0.8});
  const _blob3 = await getVideoSnap({ target: _dom, rate: 0.8 });
};

参数

getThumbnail:
  target: HTMLImageElement; // img dom对象
  width?: number; // 传入作为返回缩略图的宽
  height?: number; // 传入作为返回缩略图的高
  type?: string; // blob || base64; 默认不传返回blob
  rate?: number; // 缩放比率；默认0.5


urlToBlob:
  url: string; // 图片链接url
  width?: number; // 传入作为返回缩略图的宽
  height?: number; // 传入作为返回缩略图的高
  type?: string;  // blob || base64; 默认不传返回blob
  rate?: number; // 缩放比率；默认0.5


getVideoSnap:
  target: HTMLVideoElement;  // video dom对象
  type?: string;
  width?: number; // 传入作为返回缩略图的宽 默认180
  height?: number; // 传入作为返回缩略图的高 默认180