From 856aedf617cd3b100c22e39f512c536ce2eb7d45 Mon Sep 17 00:00:00 2001 From: Raya Straus Date: Wed, 4 Mar 2020 12:26:52 +0200 Subject: [PATCH 1/2] updated vectorize to q_10 and removed optmization width --- projects/angular-cld/src/lib/cloudinary-image.component.ts | 2 +- projects/angular-cld/src/lib/constants.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/angular-cld/src/lib/cloudinary-image.component.ts b/projects/angular-cld/src/lib/cloudinary-image.component.ts index 90e933ef..3dfbbbe4 100644 --- a/projects/angular-cld/src/lib/cloudinary-image.component.ts +++ b/projects/angular-cld/src/lib/cloudinary-image.component.ts @@ -158,7 +158,7 @@ export class CloudinaryImage if (placeholderOptions['width']) { if (placeholderOptions['width'] === 'auto') { placeholderOptions['width'] = image.getAttribute('data-width'); - } else { + } else if (this.placeholderComponent.type !== 'vectorize') { placeholderOptions['width'] = Math.ceil(parseInt(options['width'], 10) * 0.1); } } diff --git a/projects/angular-cld/src/lib/constants.ts b/projects/angular-cld/src/lib/constants.ts index 0cd58a35..815b76b7 100644 --- a/projects/angular-cld/src/lib/constants.ts +++ b/projects/angular-cld/src/lib/constants.ts @@ -18,7 +18,7 @@ export const predominantColorTransform = [ {fetch_format: 'auto', quality: 'auto'}]; export const placeholderImageOptions = { - 'vectorize': {effect: 'vectorize', quality: 1}, + 'vectorize': {effect: 'vectorize', quality: 10}, 'pixelate': {effect: 'pixelate', quality: 1, fetch_format: 'auto'}, 'blur': {effect: 'blur:2000', quality: 1, fetch_format: 'auto'}, 'predominant-color': predominantColorTransform From acb44e962bbd98b85bd5696289a37b9562e4e02a Mon Sep 17 00:00:00 2001 From: Raya Straus Date: Sun, 8 Mar 2020 16:48:19 +0200 Subject: [PATCH 2/2] Updated vectorize placeholder transformation --- projects/angular-cld/src/lib/cloudinary-image.component.spec.ts | 2 +- projects/angular-cld/src/lib/constants.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts b/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts index aa73fbb8..8eea92a3 100644 --- a/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts +++ b/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts @@ -853,7 +853,7 @@ describe('CloudinaryImage', () => { tick(); fixture.detectChanges(); const img = des[0].children[0].nativeElement as HTMLImageElement; - expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_30/e_vectorize,q_1/bear')); + expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_300/e_vectorize:3:0.1,f_svg/bear')); })); }); describe('placeholder with cl-transformation', () => { diff --git a/projects/angular-cld/src/lib/constants.ts b/projects/angular-cld/src/lib/constants.ts index 815b76b7..9d79c1a8 100644 --- a/projects/angular-cld/src/lib/constants.ts +++ b/projects/angular-cld/src/lib/constants.ts @@ -18,7 +18,7 @@ export const predominantColorTransform = [ {fetch_format: 'auto', quality: 'auto'}]; export const placeholderImageOptions = { - 'vectorize': {effect: 'vectorize', quality: 10}, + 'vectorize': {effect: 'vectorize:3:0.1', fetch_format: 'svg'}, 'pixelate': {effect: 'pixelate', quality: 1, fetch_format: 'auto'}, 'blur': {effect: 'blur:2000', quality: 1, fetch_format: 'auto'}, 'predominant-color': predominantColorTransform