自动处理并缩小九宫格图片,类似 .9 图

auto-9-patch-image 这是什么

这是一个自动处理九宫格图片的库,类似于 Android 的 .9 图,它能够自动处理,并缩小图片。

其灵感来自于 onion_ring,但由于需要直接在前端环境使用,然后就有了当前 2小时的实现。

Demo

Demo1

Demo2

如何使用 安装

> npm i -S auto-9-patch-image 引入使用

import auto9PatchImage from './src/index.js'; const imageOrUrl = './examples/1.png'; // 同时支持 URL 或者 DOM Image auto9PatchImage(imageOrUrl).then(ret => { console.log(ret); // { image, width, height, offset } // 配合 `border-image` 使用更佳,参见 Demo1 const css = ` border-image: url(${ret.image}) ${top} ${width - right} ${height - bottom} ${left} fill; border-width: ${top}px ${width - right}px ${height - bottom}px ${left}px; `; domElement.style.cssText = css.trim(); }); License

MIT

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。