I'd like to be able to use this in the browser. I tried using the Deno version, but since it uses top-level await to fetch the WebAssembly it doesn't work.

You can improve the performance of the CRC32 with slice-by-16; POC here. I've tested it extensively and all of the weird quirks (e.g. incrementing 16 times per loop instead of just adding and incrementing after each iteration) are the fastest possible method.

I'm "working" on a project that eventually will require me to work with tga images. I love deno/typescript, and this module being my favorite for this kind of task, I would love to see it support tga.

Hi folks! First of all, awesome project, great job!

I'm trying to create a smart image server that crops/encodes the image depending on the user's browser on Deno. Node.js has lots of alternatives, like Sharp etc, however, Deno still does not support most of them.
I've come across ImageScript recently and really liked your approach of zero dependencies and decided to give it a go, however, I've noticed the Deno branch lacks WEBP support. I've seen that the master branch already supports webp and my question is, do you plan to support webp on Deno on the near future? Thanks!

• JPEG decoding (7d29552, 8306674)
• JPEG encoding (fce1f77)

Describe the bug
Here's a magnified rendering of the text "bf" in the font Bahnschrift 20pt using java.awt.Graphics2D.drawString() in Processing:

Note how the stems end precisely at a pixel border, so there's no gray "aura".

Now here's the same text rendered using ImageScript:

As you can see the grid fitting is not working properly.

To confirm my suspicion I removed the hinting instructions from the letter "f" in FontForge. (Hints -> Edit Instructions... -> Edit -> delete everything) Sure enough now with Java I get the exact same faulty rendering for the "f" as with ImageScript:

Platform:

• OS: Linux
• Environment: NodeJS in Docker
• Version: 1.2.16

Is your feature request related to a problem? Please describe.
A lot of devices and browsers have started to support AVIF which is the best format in the market right now but just relying on WebP won't be the greatest deal.

Describe the solution you'd like
I would like image-script to support AVIF so that it can be use a replacement of libraries like sharp.

Please consider migrating from deno.land/x to JSR. It's easy and can be automated.: https://jsr.io/docs/migrate-x-to-jsr

A JSR module dependent upon ImageScript can import it through the npm: specifier; however, that prohibits the dependency from being used in Deno Deploy. The npm version of ImageScript uses Node APIs that are not supported in Deno Deploy's environment.

Hi !

First of all, awesome library !

But there is one feature missing, would it be possible to add the possibility to blur an image ? I searched and don't think there is a way to do it via your library or even Deno right now.

It would be really cool !

My use case is that I need a server that gets a url as an input, fetches the image from the url, does some manipulation to it including blurring it and returns the image to the user.

Anyway, thank you for your work !

Is your feature request related to a problem? Please describe.
Thank you for your excellent work so far!

As we know, users in some internal or special networks may have difficulty accessing some static files provided by third-party CDNs. All utility functions under the browser branch of ImageScript have hardcoded WASM resource files from unpkg.com. It would be helpful to provide a configuration function to customize the location of the WASM resources.

Another potential issue is that the current WASM version of ImageScript seems to only provide the final JavaScript file for deployment. Is there any plan to release a separate npm package for the browser branch?

Describe the solution you'd like

• The expected WASM file configuration API might be similar to the way vercel/satori embeds yoga.wasm: Runtime and WASM. The difference is that we seem to need to configure more WASM files. Currently, I can find the following in the code:

  • https://unpkg.com/imagescript@${version}/wasm/any/font.wasm
  • https://unpkg.com/imagescript@${version}/wasm/any/gif.wasm
  • https://unpkg.com/imagescript@${version}/wasm/any/jpeg.wasm
  • https://unpkg.com/imagescript@${version}/wasm/any/svg.wasm
  • https://unpkg.com/imagescript@${version}/wasm/any/tiff.wasm
  • ...(any omissions?)

• For releasing the browser branch separately to npm, I would like to hear more of your opinions.

Additional context
If needed, I am happy to arrange time to develop this feature and submit a Pull Request.

The utils/wasm directory has WebAssembly binaries. Is the source code for these binaries available?

Describe the bug
There are no types for frontend use

Describe the bug

This error occurs in the log when deployed on Deno Deploy:

TypeError: Cannot read properties of undefined (reading 'encode') at https://deno.land/x/[email protected]/utils/wasm/font.js:27:54

To Reproduce

Includes the package and then deploy to Deno Deploy.

import * as ImageScript from "https://deno.land/x/[email protected]/mod.ts";

Expected behavior

There shouldn't be any error when simply import the package.

Screenshots

Platform:

• Deno Deploy

Additional context

The module runs perfectly in local environment.

• GIF decoding
• GIF encoding

Describe the bug
Hi everybody,
I have installed only this:

npm install @imagescript/codecs

But when I use afterwards this in a NodeJs program:

const imageCodecs = require("@imagescript/codecs");

Then I get following error:
"Error: todo! (line:18)"
My NodeJs supports wasm, because I use e.g. OpenCv wasm without problems.

To Reproduce
Just call require("@imagescript/codecs"); in a NodeJs application

Expected behavior
I don't expect a "TODO" error.

Platform:

• OS: Windows 10
• Environment : NodeJs v12.19.0
• Version 0.0.1

Thanks a lot!
Bart

Describe the bug
When i want to write a bigger text with a maxWidth in place it does wrap the text but doesn't apply the Alignment

To Reproduce

const fs = require("fs")
const { Image, TextLayout } = require("imagescript")

const maxSize = 600

// add font as needed!

const text = "Thats way to big to fit on one line, please Center it :)"
const font = fs.readFileSync('your font :)')

const genFile = async () => {
    const white = Image.rgbToColor(255,255,255)

    const params = new TextLayout({
        maxWidth: maxSize,
        wrapStyle: 'word',
        verticalAlign: 'center',
        horizontalAlign: 'top'
    })

    const txt = await Image.renderText(font, 50, text, white, params)

    const encoded = await image.encode(1, {creationTime: 0, software: ''});

    fs.writeFileSync('./test-is.png', encoded)
}

genFile()

Expected behavior
Align the Text at the center when set in verticalAlign Options and the text got Wrapped.

Screenshots

Platform:

• OS: Windows
• Environment: NodeJS
• Version: "imagescript": "^1.3.0", "node": "v20.5.1"

Additional context
It doesn't matter if the text gets composite onto another image (as expected).

Hey in npm it shows the package has not been updated since a year.

If any maintainer could push new changes with TS it would be great.

Hi, please clarify the license. Currently the license refers only to AGPL-3-or later.
Given the fix: adjust license for dual licensing committed Feb 16, I assume you have re-licensed the software to a dual licensing model allowing users to choose between the AGPL and the MIT license (which is great, given many users from companies like us are not allowed to use AGPL'ed code as per their FOSS guidelines).
However, given currently the change to the dual licensing model seems to be be only viewable from the change in the package.json (7493edd), it would be great if you could clarify the /dual) license in the license folder (https://github.com/matmen/ImageScript/blob/master/LICENSE), which currently still refers only to the AGPL license (?).
For instance, adding the MIT license text with your copyright notice and a sentance like "Th_is code is dual licensed under the APGL-3-or later OR the MIT License. You can choose between either of those licenses_" would be extremly heplful.
Thank you!

I like this project and I really need this project in my/our project, but no TypeScript declaration support just yet.
Any time soon?

README.md
I don't understand, I don't know how to use it

Describe the bug
Make a 100px * 100px background,
Make a rectangle with the same size,
Unexpected 1px offset appeared at both x & y

To Reproduce
Steps to reproduce the behavior:

import { Image } from 'https://deno.land/x/[email protected]/mod.ts'

const canvas = new Image(100, 100);

canvas.fill(0x00ff00_ff) // Green Background
canvas.drawBox(0, 0, 100, 100, 0xff0000_ff) // Red Rectangle

await Deno.writeFile("image.png", await canvas.encode())

Expected behavior
There should be 0 offset as the parameters

Screenshots

Platform:

deno --version                                                                                                                                         unindexed 6
deno 1.42.1 (release, aarch64-apple-darwin)
v8 12.3.219.9
typescript 5.4.3

Additional context
Add any other context about the problem here.

Encoding:

• RGBA (5cbfd92)
• APNG

Decoding:

• GRAY (18a1a33)
• GRAYA (18a1a33)
• RGB (6fe1095)
• RGBA (9e88d43)
• IDX (9a9a8e7)
• sample depth 16 (d63d921) (needs testing?)
• IDXA
• interlacing
• APNG

Is your feature request related to a problem? Please describe.

Is there was a way to add a feature to take a PNG or JPG source image and replace the default background color with a transparent background or alpha/translucency. If necessary, the default background color can simply be selected using the pixel at the [0,0] x/y coordinate of the source image.

Right now, I'm bundling my code to make it ready for AWS Lambda.
But because of how the WASM is loaded, the bundler can't know about the WASM files.
Would it be possible to import the WASM file with a regular import statement?

Example:

import { decode } from "file.wasm"

This would allow bundlers to recognize what is happening and include the wasm file in the bundle output.
Of course, node / deno will need native support for wasm imports. 🤞

I’m using ImageScript with Deno, and use renderText with TextLayout.

I am using the following code:

const textLayout = { maxWidth: 900, maxHeight: 160, wrapStyle: 'word', verticalAlign: 'left', horizontalAlign: 'top', wrapHardBreaks: true };
const descriptionText = Image.renderText(font, 32, description, 0xffffffff, textLayout);
image.composite(descriptionText, 65, 225);

I think it would be useful to export TextLayout to write the following.

import { TextLayout } from "https://deno.land/x/imagescript/mod.ts";
const textLayout = new TextLayout({ maxWidth: 900, maxHeight: 160, wrapStyle: 'word' });
const descriptionText = Image.renderText(font, 32, description, 0xffffffff, textLayout);
image.composite(descriptionText, 65, 225);

For that I can also create a pull request.

Thanks

Describe the bug
This might be somewhat of a feature request but since there's an error message I'm using the bug template.

To Reproduce

1. Start a Docker container with Node.js that is based on Alpine Linux, for example nodered/node-red:

docker run -it --rm --entrypoint /bin/bash --user root nodered/node-red

2. Create some test scripts:

cd /
mkdir test
cd test
npm install imagescript
echo "import {Image} from 'imagescript'; const i = new Image(200, 200);" > test.mjs

3. Run the script:

node test.mjs

Actual behavior

An error message appears:

# node test.mjs
/test/node_modules/imagescript/codecs/node/index.js:3
catch (err) { throw new Error('unsupported arch/platform: ' + err.message); }
                    ^

Error: unsupported arch/platform: Error loading shared library ld-linux-aarch64.so.1: No such file or directory (needed by /test/node_modules/imagescript/codecs/node/bin/arm64-linux.node)
    at Object.<anonymous> (/test/node_modules/imagescript/codecs/node/index.js:3:21)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at Object.<anonymous> (/test/node_modules/imagescript/ImageScript.js:4:16)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)

Expected behavior
Script runs, no output

Platform:

• OS: Linux
• Environment: NodeJS in Docker
• Version: 1.2.16

Additional context
I tried apk add gcompat and apk add libc6-compat. It changes the error message into:

# node test.mjs
/test/node_modules/imagescript/codecs/node/index.js:3
catch (err) { throw new Error('unsupported arch/platform: ' + err.message); }
                    ^

Error: unsupported arch/platform: Error relocating /test/node_modules/imagescript/codecs/node/bin/arm64-linux.node: __memcpy_chk: symbol not found
    at Object.<anonymous> (/test/node_modules/imagescript/codecs/node/index.js:3:21)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at Object.<anonymous> (/test/node_modules/imagescript/ImageScript.js:4:16)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)

Describe the bug
When an image is rotated the height and width are not changed. For example, if we have an image with an orientation of 6, we need to rotate it 90 degrees to be viewed properly. When calling .rotate(270) on the image, black bars are added to the left and right of the image to maintain the original height and width. Rotating the image 90 degrees causes the height and width to be swapped, but it looks like the height and width are not swapped causing black bars on either side of the image.

Original Image: IMG_0156 - Copy (2) (1).jpeg

Resulting Bug: Bug.jpeg

To Reproduce
Steps to reproduce the behavior:

1. Load attached image (IMG_0156 - Copy (2) (1).jpeg)
2. Rotate image 270 degrees
3. encode to JPEG
4. View result

Expected behavior
I expect the image to be rotated and the height and width to be swapped because we rotated the image 90 degrees

Screenshots
See attached images for before and after

Platform:

• OS: Windows 10
• Environment: Chrome
• Version: 1.2.16

Additional context
Add any other context about the problem here.

I want to use this but I don't know how because I can't find anything online about what the url is that I should be importing from, i.e. https://deno.land/x/....