将CSS过滤器应用于裁剪图像并保存/上载

我已经可以，输入图像并裁剪它。我尝试将CSS过滤器应用于它，但CSS过滤器似乎只应用于img标记，而不是实际的图像

我正在使用@Alyle裁剪器和ngx图像裁剪器（测试）。两者都给了我一个用于裁剪图像的base64字符串。我能够将裁剪后的图像加载到img标签，并将其上传到数据库

  onCropped(e: ImgCropperEvent) {
    this.croppedImage = e.dataURL;
    // console.log('cropped img: ', e.dataURL);
  }
  onloaded(e: ImgCropperEvent) {
    this.imagemOriginal = e.originalDataURL;
    this.cropper.center();
    console.log('img loaded', e.name);
  }
  onerror(e: ImgCropperErrorEvent) {
    console.warn(`'${e.name}' is not a valid image`, e);
  }

  // Aplicar Filtros /////////////////////////////////////////////////
  change(crop: Crop): void {

    this.stylus = crop.nome;

    this.crops.forEach(function (value) {
      (value.nome === crop.nome) ? value.ehSelec = true : value.ehSelec = false;
    });

    // const canvas = document.getElementById('cropping'), image = document.createElement('img');
    // image.src = canvas.toDataURL('image/jpeg', 1.0);
    // document.body.appendChild(image);

  }

  enviarParanue(): void {
    const ref = firebase.storage().ref(`imagens/usuarios/idTeste`).child(`nomeTeste`);

    const stringa = this.removerString(this.croppedImage);
    ref.put(this.base64toBlob(stringa, 'image/png')).then((snapshot) => {
      // console.log('snapshot', snapshot.valueOf());

      ref.getDownloadURL().then(function(downloadURL) {
        console.log('File available at', downloadURL);
      });

    });


    // ref.putString(stringa, 'base64', {contentType: 'image/png'}).then((snapshot) => {
    //   // console.log('snapshot', snapshot.valueOf());

    //   ref.getDownloadURL().then(function(downloadURL) {
    //     console.log('File available at', downloadURL);
    //   });
    // });
  }

  removerString(stringa: string): string {
    return stringa.substring(23);
  }

  base64toBlob(base64Data: any, contentType: any) {
    contentType = contentType || '';
    const sliceSize = 1024;
    const byteCharacters = atob(base64Data);
    const bytesLength = byteCharacters.length;
    const slicesCount = Math.ceil(bytesLength / sliceSize);
    const byteArrays = new Array(slicesCount);

    for (let sliceIndex = 0; sliceIndex < slicesCount; ++ sliceIndex) {
      const begin = sliceIndex * sliceSize;
      const end = Math.min(begin + sliceSize, bytesLength);

      const bytes = new Array(end - begin);
        for (let offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
  }


EXAMPLE OF THE CSS FILTERS:
.none {filter:none;}
.blur {filter:blur(2.5px);}
.brightness {filter:brightness(200%);}
.contrast {filter:contrast(200%);}
.drop-shadow {filter:drop-shadow(8px 8px 10px gray);}
.grayscale {filter:grayscale(100%);}
.hue-rotate {filter:hue-rotate(90deg);}
.invert {filter:invert(100%);}
.opacity {filter:opacity(30%);}
.saturate {filter:saturate(8);}
.sepia {filter:sepia(100%);}
.contrast-brightness {filter:contrast(200%) brightness(150%);}

ONCROPED（e:ImgCropperEvent）{
this.cropeImage=e.dataURL；
//log（'crapped img:'，例如dataURL）；
}
空载（e:ImgCropperEvent）{
this.imagemOriginal=e.originalDataURL；
this.crapper.center（）；
console.log（'img-loaded'，例如name）；
}
onerror（e:IMGCROPROPERROVENT）{
console.warn（“${e.name}”不是有效的映像“%e”）；
}
//Aplicar过滤器/////////////////////////////////////////////////
更改（裁剪：裁剪）：无效{
this.stylus=crop.nome；
this.crops.forEach（函数（值）{
（value.nome==crop.nome）？value.ehSelec=true:value.ehSelec=false；
});
//const canvas=document.getElementById（'croping'），image=document.createElement（'img'）；
//image.src=canvas.toDataURL（'image/jpeg'，1.0）；
//document.body.appendChild（图像）；
}
enviraparanue（）：void{
const ref=firebase.storage（）；
const stringa=this.removerString（this.cropeImage）；
ref.put（this.base64toBlob（stringa，'image/png'））。然后（（快照）=>{
//console.log（'snapshot'，snapshot.valueOf（））；
参考getDownloadURL（）。然后（函数（downloadURL）{
log（'File available at'，downloadURL）；
});
});
//ref.putString（stringa，'base64'，{contentType:'image/png'}）。然后（（快照）=>{
////console.log（'snapshot'，snapshot.valueOf（））；
//参考getDownloadURL（）。然后（函数（downloadURL）{
//log（'File available at'，downloadURL）；
//   });
// });
}
删除字符串（stringa:string）：字符串{
返回字符串a.子字符串（23）；
}
base64toBlob（base64Data:any，contentType:any）{
contentType=contentType | |“”；
常量切片大小=1024；
常量ByTechCharacters=atob（base64Data）；
const bytesLength=byteCharacters.length；
const slicescont=Math.ceil（字节长度/切片大小）；
const bytearray=新数组（slicescont）；
for（设sliceIndex=0；sliceIndex

问题是。。。我不知道如何将CSS过滤器应用到图像上，以上传带有效果（深褐色、对比度等）的裁剪。 我试图获取imgsrc并将其转换为Blob，但没有成功