自动处理并缩小九宫格图片,类似 .9 图
auto-9-patch-image
这是什么
这是一个自动处理九宫格图片的库,类似于 Android 的 .9 图,它能够自动处理,并缩小图片。
其灵感来自于 onion_ring,但由于需要直接在前端环境使用,然后就有了当前 2小时的实现。
DemoDemo1
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、网站不提供资料下载,如需下载请到原作者页面进行下载。