Code Monkey home page Code Monkey logo

imagescript's Introduction

Hi there ๐Ÿ‘‹


I'm Mathis Mensing, a 23 year old software developer from Germany.

Metrics

Project Showcase

  • ImageScript, a zero-dependency JavaScript image manipulation library
  • fluidd, a 3D printer web interface
  • pxlAPI, a SaaS image manipulation / web scraping API

Skills

  • Node.js; JavaScript / Typescript
  • PostgreSQL / MySQL
  • HTML / CSS
  • Docker
  • Windows / Linux (system administration)
  • Networking (+IPv6)

Contact

You can contact me via one of the following methods:

imagescript's People

Contributors

evanwashere avatar hhatto avatar ink0rr avatar leonchuu avatar matmen avatar ray-1337 avatar requizm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

imagescript's Issues

Slice-by-16 CRC32

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.

[FR] Blur an image

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 !

Doesn't export the TextLayout class?

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

Image rotation doesn't maintain height and width

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
IMG_0156 - Copy (2) (1).jpeg

Resulting Bug: Bug.jpeg
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.

[BUG] Font hinting not working

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

image

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:

image

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:

image

Platform:

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

Wasm Source Code

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

[FR] Support converting to AVIF images

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.

Update package on NPM

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

image

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

Browser support

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.

[BUG] Doesn't run in Node-RED/Alpine Linux

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
  1. 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
  1. 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)

TypeScript Support + Contribution

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

[FR] TGA format support

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.

[BUG] An error occurs when using the codecs in NodeJs

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

[BUG] Unexpected 1px offset with drawBox()

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

image

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.

[BUG] Error when deployed on Deno Deploy

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

Screenshot 2022-05-11 at 4 17 17 PM

Platform:

  • Deno Deploy

Additional context

The module runs perfectly in local environment.

[FR] Webp Support for Deno

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!

Dual License clarification

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.