Image generation library for node.js

Related tags

Learning resource canvason
Overview

canvason

Overview

JSON オブジェクトを引数にとり、画像を生成するライブラリです。
sharp に依存しています。
開発中のため、まだ使用することはできません。

Installation

yarn add canvason

Usage

import { generateImage } from "canvason";

const query = {
  canvas: {
    w: 1980,
    h: 1080,
    layers: [
      {
        format: "png",
        src: "https://.../bg.png",
        x: 0,
        y: 0,
        w: 1920,
        h: 1080,
      },
      {
        format: "png",
        src: "https://.../stage_bg.png",
        x: 100,
        y: 100,
        w: 800,
        h: 450,
        masks: [
          {
            format: "rect",
            x: 100,
            y: 100,
            w: 800,
            h: 450,
            rounded: 40,
          },
        ],
      },
      {
        format: "otf",
        src: "https://.../font.otf",
        text: "Hello World",
        color: "#000000",
        size: 100,
        x: 100,
        y: 100,
      },
    ],
  },
};

const base64 = generateImage(query, { output: "base64" });
You might also like...

qrcode generation standalone (doesn't depend on external services)

jquery.qrcode.js jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is sta

Dec 29, 2022

⚡️ Next-generation data transformation framework for TypeScript that puts developer experience first

⚡️ Next-generation data transformation framework for TypeScript that puts developer experience first

TypeStream Next-generation data transformation framework for TypeScript that puts developer experience first Nowadays, almost every developer is worki

Nov 26, 2022

Non-interactive publicly verifiable distributed key generation and resharing algorithm over BLS12-381

NPVDKG-RS This repository contains a mathematical presentation and some code to demonstrate our developed non-interactive publicly verifiable distribu

May 19, 2022

Software for the next generation of social media. https://gitlab.com/soapbox-pub/soapbox-fe

Software for the next generation of social media. https://gitlab.com/soapbox-pub/soapbox-fe

Soapbox FE Soapbox FE is a frontend for Mastodon and Pleroma with a focus on custom branding and ease of use. It's part of the Soapbox project. Try it

Dec 30, 2022

Color palette generation function using hue cycling and simple easing functions.

Color palette generation function using hue cycling and simple easing functions.

Rampensau 🐷 Color palette generation function using hue cycling and easing functions. Check out a simple demo or see it in action over on farbvelo 10

Dec 28, 2022

Front End do Projeto Integrador do bootcamp da Generation Brasil.

Front End do Projeto Integrador do bootcamp da Generation Brasil.

Integrantes do grupo 📖 : Alan Carlos Fabrício Rocha Guilherme Albuquerque Josiane Caroliny Lucas Melo Wesley Ninaja Genducation 📚 Projeto desenvolvi

Feb 2, 2022

WunderGraph is the Next-Generation API Developer Platform.

WunderGraph is the Next-Generation API Developer Platform.

WunderGraph Quickstart • Website • Docs • Examples • Blog • Discord • Twitter What is WunderGraph? WunderGraph is the Next-Generation API Developer Pl

Jan 4, 2023

An example of implementation of the Veriifiable Presentation Generation Service specification.

Verifiable Presentation Generation Service A plugin-based service that allows issuers to render verifiable presentations from templates, and store it

Nov 16, 2022

A new generation GUI automation framework for Web and Desktop Application Testing and Automation.

A new generation GUI automation framework for Web and Desktop Application Testing and Automation.

Clicknium-docs Clicknium is a new generation GUI automation framework for all types of applications. It provides easy and smooth developer experience

Dec 19, 2022
Comments
  • 画像のフィルター機能

    画像のフィルター機能

    ドロップシャドウや色変更のようなフィルター機能があると便利だと思う。

    filters: [
  {
    type: "dropShadow",
    angle: 60,
    distance: 5,
    color: "red",
  }
]

    みたいな感じで逐次関数実行で上書きしていくような…

    enhancement 
    opened by namosuke 1
  • Fetchのキャッシュ機能

    Fetchのキャッシュ機能

    現状の実装では画像を毎回読み込んでいるが、複数回同じ画像を使うことがあるならキャッシュを検討すべきである。 例えば、ArrayBufferを連想配列に、URLをキーに保存することが考えられる。

    メリット

    • 読み込みの高速化
    • リクエスト先のサーバー負荷軽減

    デメリット

    • メモリリーク、メモリ効率悪化の可能性
    enhancement 
    opened by namosuke 0
  • 画像やテキストのレイヤーを仮想的に作成して大きさを取得できる機能

    画像やテキストのレイヤーを仮想的に作成して大きさを取得できる機能

    例えばテキストの下に可変長の背景を置きたいときに、テキストの長さを取得したくなるはず。 現状では難しいので、

    width: {
  type: "text",
  text: "hello, world"
}

    みたいな感じで指定できると嬉しいと思う。widthとheightではそれぞれで画像を取得することにはなる

    enhancement 
    opened by namosuke 0
  • image typeのsrcに新しいレイヤーを入れられるようにする

    image typeのsrcに新しいレイヤーを入れられるようにする 

    {
  type: "image",
  src: {
    type: "image",
    src: "",
  },
},

    みたいな。srcに突っ込むほうはcanvasでも良いと思う（compositeする場合は配置が楽）。だが、型周りがめんどくなる予感

    enhancement 
    opened by namosuke 0
Owner
ナモすけ
ウラルとかナモすけとか言います
ナモすけ
GitHub
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Image generation library for node.js

canvason Overview JSON オブジェクトを引数にとり、画像を生成するライブラリです。 sharp に依存しています。 開発中のため、まだ使用することはできません。 Installation yarn add canvason Usage import { generateImage

ナモすけ 10 Oct 10, 2022
optimize image & upload file to cloud as image bed with tiny image automic.

Rush! 图片压缩 & 直传图床工具 这是一个兴趣使然的项目, 希望 Rush! 能让这个世界的网络资源浪费减少一点点 下载 Downloads 获取最新发行版 功能 Features 拖拽批量压缩图片, 支持格式 jpg/png/gif Drop to optimize, jpg/png/gif

{ Chao } 3 Nov 12, 2022
A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

ProtectImage.js ProtectImage.js is a Javascript library that helps prevent image theft by disabling traditional user interactions to download/copy ima

null 4 Aug 18, 2022
Simple JavaScript Library to add parallax image to background-image

Backpax Simple JavaScript Library to add parallax image to background-image Install $ npm install backpax --save Demo Demo page is here Usage If you

appleple 13 Oct 12, 2022
🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Blazity 30 Dec 1, 2022
App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals will send an image to be processed, this then gets sent to a Python instance which will get the data read from the image. That data gets sent back and will be saved to the account this meter belongs to. This gives you the ability to track your currently analog meter in a digtal environment.

Usage App Server About this project App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals

null 7 Dec 20, 2022
Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Piccloud Piccloud is a full-stack application built with Angular & Spring Boot. It is an online image clipboard that lets you share images over the in

Olayinka Atobiloye 3 Dec 15, 2022
This project is a web application that allows the user to select a location on a map, display the selected region, and capture an image of that region. The captured image is then applied as a texture to a 3D cuboid using BabylonJS.

Map-Babylon Client repo commit details https://github.com/hashmat-noorani/mapbox-babylon-client Server repo commit details https://github.com/hashmat

Hashmat Noorani 4 Mar 21, 2023
Framework agnostic CLI tool for routes parsing and generation of a type-safe helper for safe route usage. 🗺️ Remix driver included. 🤟

About routes-gen is a framework agnostic CLI tool for routes parsing and generation of a type-safe helper for safe route usage. Think of it as Prisma,

Stratulat Alexandru 192 Jan 2, 2023