css - 将 CSS 过滤器应用于裁剪的图像并保存/上传

Question

我已经可以，输入图像并裁剪它。我尝试对其应用 CSS 过滤器，但似乎 CSS 过滤器仅适用于 img 标签，而不适用于实际图像。

我同时使用@Alyle-cropping 和 ngx-image-cropper(tests)。两者都给我一个 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%);}

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

标签： cssangulartypescript