CODEWITHSUNDEEP
cssangulartypescript
DValdir Martins
DValdir Martins

Reputation: 181

Apply CSS Filters to cropped image and save/upload

I can already, input the image and crop it. I tried to apply CSS filters to it, but seems the CSS filters only apply on the img tag, not the actual image.

I am using both @Alyle-cropping and ngx-image-cropper(tests). Both give to me a base64 string for the cropped image. I am able to load the cropped image to the img tag and also upload it to the database.


  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%);}

Problem is... I don't know how to apply the CSS filters to the image to upload the cropped with the effects(sepia, contrast, etc). I tried to get the img src and convert it to Blob, but didn't work.

Upvotes: 1

Views: 539

Answers (1)

DValdir Martins
DValdir Martins

Reputation: 181

I ended up saving in the database a string with the name of the filter. So I apply the filter when I load the image. A good side of it, is that I can change the filter whenever I want.

Upvotes: 0

Related Questions