oss-webp

检测浏览器与webp的兼容性，在webp可用时添加后缀

安装

npm i oss-webp -S

使用

import ossWebp from "oss-webp";
ossWebp('yourOssImage.jpg',customSuffix).then(r=>{
	console.log(r);
})

完整示例

####原生Js

ossWebp('https://image1.aliyuncs.jpg','/resize,l_100').then(r=>{
	console.log(r); 
	//output： https://image1.aliyuncs.jpg?x-oss-process=image/resize,l_100/format,webp
})

####Angular pipe

import { Pipe, PipeTransform } from "@angular/core";
import ossWebp from "oss-webp";
import {Observable} from "rxjs";

@Pipe({
  name: "webp"
})
export class WebpPipe implements PipeTransform {
  transform(value: any, args?: any): any {
      return new Observable(observer=>{
          ossWebp(value,args?args:'').then(r => {
              observer.next(r)
          });
      })
  }
}