图片剪裁
原始图片链接在前端展示需经过处理后,再使用。可以通过该组件进行图片压缩,剪裁等。
可处理的图片类型
img[1-4].tuhu.org/xxx
安装
npm install @tuhu/imgcut
eg.
var imgCut = require('@tuhu/imgcut');
imgCut.getSrc({
width: '10%',
src: 'https://img1.tuhu.org/activity/image/d66a/13a3/949ff9d23d4c39b8c4100b07_w1080_h819.png'
})
参数说明
参数 | 类型 | 说明 |
---|---|---|
wdth | String | 说明1 |
src | String | 说明2 |
说明1
- width: 单位(['rem', 'px', '%', 'vw'])
- 负数或者falsy,抛出异常
- 大于原始值并且图片带宽高比:剪裁结果取原始值
说明2
src说明2:
- 可处理类型:
- 标准url: https://img1.tuhu.org/activity/image/0139/5618/3d16866d2fb2d2059d550f29_w158_h158.png
- url长宽格式不同: https://img1.tuhu.org/activity/image/0139/5618/3d16866d2fb2d2059d550f29_158w_158h.png
- 不带长宽: https://img1.tuhu.org/Images/Logo/dazhong.png
- gif图片(特殊处理,不然会丢失动画): https://img1.tuhu.org/activity/image/ee09/a853/c3bc65b600e58be2597bc0f5_w1080_h321.gif
- 原始webp图片(不支持webp环境需要反转成jpg): https://img1.tuhu.org/activity/image/ee09/a853/c3bc65b600e58be2597bc0f5_w1080_h321.webp
- 本身包含@图片(去掉@,重新剪裁): https://img1.tuhu.org/activity/image/5411/22a7/0e866967b380412dd2e6ee76_w1080_h533.png@750w_99q.png
- 非img.tuhu.org域下图片: https://res.tuhu.org/Activity/dist/img/car.gif