Skip to content

Commit

Permalink
fix: add format conversion to transformimage function
Browse files Browse the repository at this point in the history
  • Loading branch information
@jwerre
jwerre committed Jul 12, 2023
1 parent 0f300c6 commit a29779e
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 22 deletions.
1 change: 1 addition & 0 deletions .cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"version": "0.2",
"language": "en",
"words": [
"apng",
"dasherize",
"degit",
"esbuild",
Expand Down
62 changes: 43 additions & 19 deletions src/tests/transform_image.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { describe, expect, it } from 'vitest';
import { transformImage, type TransformOptions } from '../index';

const TEST_IMG = 'https://media.surveyplanet.com/testing/default.jpeg';
const TEST_IMG = 'https://media.surveyplanet.com/testing/default';
const ROOT_URL = 'https://media.surveyplanet.com';

describe('transform_image', function () {
Expand All @@ -17,6 +17,30 @@ describe('transform_image', function () {
expect(url).toBe(TEST_IMG);
});

it('should change the image format', function () {
const format = 'png';
const url = transformImage(TEST_IMG, {}, format);
expect(url).toBe(`${TEST_IMG}.${format}`);
});

it.skip('should not change the image format since the image already has a file extension', function () {
const exts = [
'png',
'jpg',
'jpeg',
'gif',
'svg',
'webp',
'apng',
'avif',
];
for (const ext of exts) {
const img = `${TEST_IMG}.${ext}`;
const url = transformImage(img, {}, 'png');
expect(url).toBe(img);
}
});

it('should change the width, height, and fit', function () {
const fit = 'contain';
const height = 150;
Expand All @@ -25,127 +49,127 @@ describe('transform_image', function () {
const url = transformImage(TEST_IMG, options);

expect(url).toBe(
`${ROOT_URL}/f_${fit},h_${height},w_${width}/testing/default.jpeg`
`${ROOT_URL}/f_${fit},h_${height},w_${width}/testing/default`
);
});

it('should change the image background', function () {
const value = '00FF00';
const options: TransformOptions = { background: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/bg_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/bg_${value}/testing/default`);
});

it('should change the image blur', function () {
const value = 10;
const options: TransformOptions = { blur: value };

const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/b_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/b_${value}/testing/default`);
});

it('should change the image fit', function () {
const value = 'contain';
const options: TransformOptions = { fit: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/f_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/f_${value}/testing/default`);
});

it('should change the image flatten', function () {
const value = 'ff00ff';
const options: TransformOptions = { flatten: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/fl_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/fl_${value}/testing/default`);
});

it('should change the image flip', function () {
const value = true;
const options: TransformOptions = { flip: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/fi/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/fi/testing/default`);
});

it('should change the image flop', function () {
const value = true;
const options: TransformOptions = { flop: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/fo/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/fo/testing/default`);
});

it('should change the image gamma', function () {
const value = 0.5;
const options: TransformOptions = { gamma: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/ga_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/ga_${value}/testing/default`);
});

it('should change the image grayscale', function () {
const value = true;
const options: TransformOptions = { grayscale: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/g/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/g/testing/default`);
});

it('should change the image height', function () {
const value = 150;
const options: TransformOptions = { height: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/h_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/h_${value}/testing/default`);
});

it('should change the image median', function () {
const value = 5;
const options: TransformOptions = { median: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/m_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/m_${value}/testing/default`);
});

it('should change the image negate', function () {
const value = true;
const options: TransformOptions = { negate: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/n/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/n/testing/default`);
});

it('should change the image normalize', function () {
const value = true;
const options: TransformOptions = { normalize: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/no/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/no/testing/default`);
});

it('should change the image rotate', function () {
const value = 5;
const options: TransformOptions = { rotate: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/ro_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/ro_${value}/testing/default`);
});

it('should change the image sharpen', function () {
const value = 10;
const options: TransformOptions = { sharpen: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/s_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/s_${value}/testing/default`);
});

it('should change the image threshold', function () {
const value = 10;
const options: TransformOptions = { threshold: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/th_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/th_${value}/testing/default`);
});

it('should change the image tint', function () {
const value = '0:0';
const options: TransformOptions = { tint: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/t_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/t_${value}/testing/default`);
});

it('should change the image width', function () {
const value = 100;
const options: TransformOptions = { width: value };
const url = transformImage(TEST_IMG, options);
expect(url).toBe(`${ROOT_URL}/w_${value}/testing/default.jpeg`);
expect(url).toBe(`${ROOT_URL}/w_${value}/testing/default`);
});
});
23 changes: 20 additions & 3 deletions src/transform_image.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,30 @@ const ROOT_URL = 'https://media.surveyplanet.com';
* @async
* @returns string
*/
export default (url: string, options: TransformOptions = {}): string => {
export default (
url: string,
options: TransformOptions = {},
format?: 'png' | 'jpg' | 'jpeg' | 'gif'
): string => {
// console.log('transformImage', url, options, format);
if (url.length <= 0 || !url.startsWith(ROOT_URL)) {
return url;
}

if (Object.entries(options).length === 0) {
if (Object.entries(options).length === 0 && !format) {
return url;
}

if (format) {
if (/\.(?:jpe?g|webp|gif|a?png|svg|avif)$/.test(url)) {
console.warn(
`transformImage() cannot change format of legacy images with extension in file name: ${url}.`
);
} else {
url = `${url}.${format}`;
}
}

const transformations: string = Object.keys(options)
.filter((key) => key in SHORTCUTS)
.map((key) => {
Expand All @@ -94,7 +109,9 @@ export default (url: string, options: TransformOptions = {}): string => {
})
.join(',');

url = url.replace(ROOT_URL + '/', `${ROOT_URL}/${transformations}/`);
if (transformations.length > 0) {
url = url.replace(ROOT_URL + '/', `${ROOT_URL}/${transformations}/`);
}

return url;
};

0 comments on commit a29779e

Please sign in to comment.