Is File Size Enough for Image Validation?

k.yamashita — Sat, 21 Oct 2023 17:25:13 +0000

TL;DR

Image editing on the server side is a memory-intensive operation. Memory usage during image editing processes is influenced not just by file size but also by resolution. This is because the processed image data is expanded as an uncompressed bitmap in memory. To avoid memory shortages on the server, you can estimate memory consumption using the image's header information and decide to halt processing if necessary.

Verifying Memory Usage When Editing High-Resolution Images

I conducted tests to ascertain if editing high-resolution images genuinely amplifies memory usage. These tests were carried out using Go version 1.20.

Below is the sample code. In this example, a 7000×7000(6.1KB) PNG image is resized to 70×70. For comparison, an image of 4032×3024(11.7MB) in PNG format is also resized to 70×70. Using Go's "testing" package, I gauged the average memory usage when executing the associated code 100 times.

main.go

package main

import (
    "image"
    _ "image/png"
    "os"
    "github.com/disintegration/imaging"
)

// Function to resize the image
func ResizeImage(r image.Image) image.Image {
    return imaging.Resize(r, 70, 70, imaging.Lanczos)
}

func OpenAndDecodeImage(path string) (image.Image, error) {
    file, err := os.Open(path)
    if err != nil {
        return nil, err
    }
    defer file.Close()

    img, _, err := image.Decode(file)
    return img, err
}

func main() {
    // Main process
}

main_test.go

package main

import (
    _ "image/png"
    "testing"
    "github.com/disintegration/imaging"
)

func BenchmarkResizeImage(b *testing.B) {
    for i := 0; i < b.N; i++ {
        f, openErr := OpenAndDecodeImage("7000×7000.png")
        if openErr != nil {
            b.Errorf("OpenAndDecodeImage() error = %v", openErr)
        }
        resizedImage := ResizeImage(f)
        resizeErr := imaging.Save(resizedImage, "resized.png")
        if resizeErr != nil {
            b.Errorf("imaging.Save() error = %v", resizeErr)
        }
    }
}

From these outcomes, it's evident that even though the image file size is a mere 6.1KB, it uses up around 200MB of memory.

Why it happened

Memory usage is influenced by resolution, not file size.
When loading an image into memory, the memory usage can fundamentally be estimated using:

Image data volume = width in pixels × height in pixels × data size per pixel.

Thus, it's crucial to validate using the image's pixel dimensions before completely loading it into memory.

How to ascertain pixel dimensions

For JPEG and PNG formats, the image's pixel dimensions (width and height) are encapsulated in the header information. This means the resolution can be acquired before the image is fully loaded.

Conclusion

Through this article, I hope readers grasp that image editing tasks can be heavy on memory, and solely validating based on file size won't suffice.

Create a Chrome Extension with React FW Plasmo

k.yamashita — Fri, 20 Oct 2023 16:55:18 +0000

Context

Recently, I created a Chrome Extension called 'hosts-modifier' with Plasmo. It allows users to effortlessly redirect domain requests without the need to modify thier hosts file. Even though it was my first time publishing, the development process was smooth. So, in this article, I would like to share how to develop a Chrome Extension with Plasmo.

Hosts modifier - Chrome ウェブストア

Hosts Modifier allows you to effortlessly redirect domain requests without the need to modify your hosts file.

chromewebstore.google.com

yamashita-ki / hosts-modifier

Download

https://chrome.google.com/webstore/detail/hosts-modifier/cmjkafkhlfpegnlhphhbpfbdblmkmden?hl=ja&authuser=0

Features

Host Management:
- Easily manage and switch between different hosts. Each host can have its own set of rules, allowing for flexible configurations
Active Host Highlighting:
- Clearly see which host is currently active with visual indicators
Quick Toggle:
- Quickly activate or deactivate a host with a single click, streamlining the process of switching between different environments
Rule Editing:
- Modify the rules associated with each host directly from the extension. This includes adding, editing, or removing specific IP and domain mappings
Persistent Storage:
- All host configurations and rules are stored persistently in the browser's local storage, ensuring that your settings are retained even after restarting the browser.

Programming language or framework used

TypeScript
React
plasmo
MUI
Jest

View on GitHub

What is Plasmo?

Plasmo is a React framework designed for creating browser extensions.

With Plasmo, you can say goodbye to tedious boilerplate code and hello to a faster, more seamless development experience.

Let's get started to create an easy Chrome Extension.

Features

First-class React + Typescript Support
Live-reloading + React HMR
Optional support for Svelte and Vue
Remote code bundling (e.g., for Google Analytics)

https://docs.plasmo.com/framework

Getting Started

Create the project

Developers can choose their favorite package manager.
In this article, I would like to choose pnpm due to its strong recommendation in the official documentation.

System Requirements
Node.js 16.14.x or later
macOS, Windows, or Linux
(Strongly Recommended) pnpm



pnpm create plasmo
# OR
yarn create plasmo
# OR
npm create plasmo

After answering few questions, you will see the following file structure.

popup.tsx : A default React component that gets rendered into your popup page.
assets : A directory for applying icons. Plasmo provides a default icon, but to publish your extension, you'll need various icon sizes (16×16, 48×48, 128×128 in PNG format).
.github : Contains GitHub Actions workflows for automated deployment.

Development Server

By executing this command, Plasmo generates a chrome-mv3-dev directory.



pnpm plasmo dev

Next, toggle on the developer mode:

chrome://extensions/

From the [Load unpacked] option, developers can upload and view their extensions.

background and content_script

Chrome extensions primarily consist of two main components: content scripts and background scripts. The differences between them are as follows:

Content Scripts: These scripts directly interact with the web page the user is viewing. Handling the web page DOM.

Background Scripts: These run in the background while Chrome is active, essentially like an invisible tab. They provide functionalities that are independent of the web pages and are browser-specific. Can not handling the web page DOM.

In Plasmo to use background scripts, create a background.ts and add below sentence on package.json.



"background": {
      "service_worker": "background.js",
      "persistent": false
    },

Convenient Chrome API

These are just brief overviews of what each API offers. For a comprehensive understanding and to explore more functionalities, it's recommended to refer to the official Chrome API documentation.

Storage API

The Chrome Storage API provides a way to store and retrieve key-value pairs in a persistent manner. Unlike cookies or local storage in web pages, the storage managed by extensions is separate and persists even when the browser is closed. This makes it a powerful tool for extensions that need to maintain state or save user preferences.

Using the Storage API

To use the Storage API, you first need to declare the "storage" permission in your extension's package.json:



{
  "permissions": ["storage"]
}

Once you have the necessary permissions, you can use the chrome.storage.local or chrome.storage.sync methods to save and retrieve data.

Local Storage:

chrome.storage.local provides a large amount of storage space for data that does not need to be synced across devices.



// Setting a value

chrome.storage.local.set({key: 'value'}, function() {

  console.log('Value is set to ' + value);

});

// Getting a value

chrome.storage.local.get(['key'], function(result) {

  console.log('Value currently is ' + result.key);

});

Synced Storage:

chrome.storage.sync allows you to store a limited amount of data that will be synced across all instances of the browser that the user is logged into.



// Setting a value

chrome.storage.sync.set({key: 'value'}, function() {

  console.log('Value is set to ' + value);

});

// Getting a value

chrome.storage.sync.get(['key'], function(result) {

  console.log('Value currently is ' + result.key);

});

Tabs API

The Tabs API allows extensions to interact with the browser's tab system. By requesting the "tabs" permission in the package.json, the extension can access information about open tabs, create new tabs, and perform various other tab-related operations. The sample code queries the currently active tab in the browser window and logs its URL.



{

  "permissions": ["tabs"]

}



// Query the active tab in the current window

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

  var currentTab = tabs[0];

  console.log(currentTab.url);

});

Conclusion

By using Plasmo to create extensions, you'll not only gain proficiency in React and TypeScript but also deepen your understanding of the various APIs provided by Chrome. Publishing an extension doesn't require much expense, allowing you to share your favorite features with the world without any regrets.

DEV Community: k.yamashita

Is File Size Enough for Image Validation?

TL;DR

Verifying Memory Usage When Editing High-Resolution Images

Why it happened

How to ascertain pixel dimensions

Conclusion

Create a Chrome Extension with React FW Plasmo

Context

Hosts modifier - Chrome ウェブストア

yamashita-ki / hosts-modifier

Download

Features

Programming language or framework used

What is Plasmo?

Features

Getting Started

Create the project

Development Server

background and content_script

Convenient Chrome API

Storage API

Using the Storage API

Local Storage:

Synced Storage:

Tabs API

Conclusion