Custom image processing

Sample code

• Expected result: The function transforms images on the origin server.

• Language: JavaScript

• Sample code:

  // Converts the image format to PNG
  async function imageFormat(request) {
      return fetch(request, {
          // Image processing command set (applies to multiple steps)
          image: [
              {
                  action: 'format',       // Action type: Format conversion
                  option: {
                      param: {
                          f: 'png',       // Format (png/jpeg/webp)
                      },
                  },
              },
          ],
      });
  }
  
  // Uses the custom resizing mode. The fixed width is 200 pixels. The height is automatically calculated proportionally.
  async function imageResize(request) {
      return fetch(request, {
          image: [
              {
                  action: 'resize',       // Action type: Resize
                  option: {
                      mode: 'custom',     // Mode: custom (not a preset mode such as over or contain)
                      param: {
                          p: 90,          // Image quality (Value range 0-100. A larger value indicates higher image quality.)
                          fw: 200,        // Fixed width (unit: pixel)
                          // fh: 200      // Optional: fixed height (If this parameter is set, its value overwrites the automatically calculated height.)
                      },
                  },
              },
          ],
      });
  }
  
  // Rotates the image 180 degrees.
  async function imageRotate(request) {
      return fetch(request, {
          image: [
              {
                  action: 'rotate',       // Action type: Rotate
                  option: {
                      mode: 'custom',     // Mode: custom
                      param: {
                          a: 180,         // Rotation angle (Value range: 0-360; clockwise)
                      },
                  },
              },
          ],
      });
  }
  
  async function handleRequest(request) {
  	const url = new URL(request.url);
  	const path = url.pathname;
  
      // Selects a processing logic based on the path
      if (path === PATH1) {              // Matches a format conversion path
          return await imageFormat(request);
      } else if (path === PATH2) {       // Matches a resizing path
          return await imageResize(request);
      } else if (path === PATH3) {       // Matches a rotation path
          return await imageRotate(request);
      }
  
  	// Returns status code 404 when no path is matched
  	return new Response('Not Found', { status: 404 });
  }
  
  export default {
  	async fetch(request) {
  	        // Transfers the request to the main processing function and returns the result
  		return handleRequest(request);
  	},
  };
  

Deployment effect