anyone familiar with creating Dynamic image with honojs. I tried with svgs but on storing it on db i

BBrett Willis Hard to say without seeing the project, but to eat up 8s it must be doing some i...

S

sdil•11/11/24, 2:53 PM

i guess you're right. i quickly instrumented my app and saw Turso DB was slow for the first few initial requests. thanks @Brett Willis !

Jjumpspace anyone familiar with creating Dynamic image with honojs. I tried with svgs but o...

I

Isaac McFadyen•11/11/24, 6:40 PM

Sharp would be compatible with Hono, it just might not be compatible with Workers. Have you tried the Sharp WASM version?

IIsaac McFadyen Sharp would be compatible with Hono, it just might not be compatible with Worker...

J

jumpspaceOP•11/11/24, 6:58 PM

I found one wasm based lib @resvg/resvg-wasm to convert from svg to png. but the issue with that is its not rendering the text. gettign a full empty image with just background

import { Resvg, ResvgRenderOptions, initWasm } from '@resvg/resvg-wasm';
import wasmModule from '@resvg/resvg-wasm/index_bg.wasm';


export const generateImage = async (text: string) => {

    console.log(text, "this is the text");



    const svg =

import { Resvg, ResvgRenderOptions, initWasm } from '@resvg/resvg-wasm';
import wasmModule from '@resvg/resvg-wasm/index_bg.wasm';


export const generateImage = async (text: string) => {

    console.log(text, "this is the text");



    const svg =

import { Resvg, ResvgRenderOptions, initWasm } from '@resvg/resvg-wasm';
import wasmModule from '@resvg/resvg-wasm/index_bg.wasm';


export const generateImage = async (text: string) => {

    console.log(text, "this is the text");



    const svg =

import { Resvg, ResvgRenderOptions, initWasm } from '@resvg/resvg-wasm';
import wasmModule from '@resvg/resvg-wasm/index_bg.wasm';


export const generateImage = async (text: string) => {

    console.log(text, "this is the text");



    const svg =

;


    try {
        await initWasm(wasmModule);

    } catch (error) {
        console.error('Resvg wasm not initialized');
        throw error;
    }


    const opts: ResvgRenderOptions = {
        background: "white", // Optional: set background color
        fitTo: {
            mode: "width",
            value: 600, // Adjust based on your needs
        },
        font: {
            loadSystemFonts: true, // Disable system fonts if you're using custom fonts
        },
    };


    const resvg = new Resvg(svg, opts);
    console.log(resvg, "this is the resvg");
    const pngData = resvg.render();

    const pngBuffer = pngData.asPng();

    return pngBuffer;

};

;


    try {
        await initWasm(wasmModule);

    } catch (error) {
        console.error('Resvg wasm not initialized');
        throw error;
    }


    const opts: ResvgRenderOptions = {
        background: "white", // Optional: set background color
        fitTo: {
            mode: "width",
            value: 600, // Adjust based on your needs
        },
        font: {
            loadSystemFonts: true, // Disable system fonts if you're using custom fonts
        },
    };


    const resvg = new Resvg(svg, opts);
    console.log(resvg, "this is the resvg");
    const pngData = resvg.render();

    const pngBuffer = pngData.asPng();

    return pngBuffer;

};

;


    try {
        await initWasm(wasmModule);

    } catch (error) {
        console.error('Resvg wasm not initialized');
        throw error;
    }


    const opts: ResvgRenderOptions = {
        background: "white", // Optional: set background color
        fitTo: {
            mode: "width",
            value: 600, // Adjust based on your needs
        },
        font: {
            loadSystemFonts: true, // Disable system fonts if you're using custom fonts
        },
    };


    const resvg = new Resvg(svg, opts);
    console.log(resvg, "this is the resvg");
    const pngData = resvg.render();

    const pngBuffer = pngData.asPng();

    return pngBuffer;

};

;


    try {
        await initWasm(wasmModule);

    } catch (error) {
        console.error('Resvg wasm not initialized');
        throw error;
    }


    const opts: ResvgRenderOptions = {
        background: "white", // Optional: set background color
        fitTo: {
            mode: "width",
            value: 600, // Adjust based on your needs
        },
        font: {
            loadSystemFonts: true, // Disable system fonts if you're using custom fonts
        },
    };


    const resvg = new Resvg(svg, opts);
    console.log(resvg, "this is the resvg");
    const pngData = resvg.render();

    const pngBuffer = pngData.asPng();

    return pngBuffer;

};

J

James•11/11/24, 7:48 PM

I would guess that the fonts being missing are your issue. You may need to bundle the fonts up yourself and then pass them in via

font: {
  fontsBuffers: [fontBuffer], //
},

font: {
  fontsBuffers: [fontBuffer], //
},

font: {
  fontsBuffers: [fontBuffer], //
},

font: {
  fontsBuffers: [fontBuffer], //
},

where

fontBuffer

fontBuffer

fontBuffer

fontBuffer is a raw

ttf

ttf

ttf

ttf

J

James•11/11/24, 7:48 PM

Example from their tests: https://github.com/thx/resvg-js/blob/97944eb0117f3d2135abe4d18be6c467103e2caa/__test__/wasm.spec.ts#L229

J

James•11/11/24, 7:48 PM

(you won't be able to use

fs

fs

fs

fs of course, but worth a try)

Jjumpspace anyone familiar with creating Dynamic image with honojs. I tried with svgs but o...

E

elpupper•11/11/24, 11:39 PM

u can store it as blobs

JJames Example from their tests: https://github.com/thx/resvg-js/blob/97944eb0117f3d213...

J

jumpspaceOP•11/12/24, 5:20 AM

yeah it worked. Stored the font in the cloudflare storage and fetched it from there and converted to ArrayBuffer and used it.

S

Sameer Ali•11/12/24, 5:55 AM

How do you handle multiple workers running on localhost when you want to make requests from the front end using a single URL (localhost:8787)? Once deployed, it’s possible to set up a route for each worker, but how do you manage this setup locally?

JJames I would guess that the fonts being missing are your issue. You may need to bundl...

J

jumpspaceOP•11/12/24, 5:57 AM

The resvg package is big And now I have issue with deployment

J

jumpspaceOP•11/12/24, 5:58 AM

I am on free plan

M

masd4•11/12/24, 8:13 AM

hi, is it a performance problem if I use a "Cloudflare Snippet" to route requests to my worker instead of directly using worker routes? The problem I have is that I'd need so many different worker routes to get it to match everything it needs to match on /mypath because /mypath has to support various cultures in front: /(en|fr|de)/mypath <--- and this regex isn't allowed in worker routes

J

johtso•11/12/24, 2:36 PM

what's the recommended way to run a one off script locally?

J

johtso•11/12/24, 2:37 PM

tsx chokes on this import

import { DurableObject } from "cloudflare:workers";

import { DurableObject } from "cloudflare:workers";

import { DurableObject } from "cloudflare:workers";

import { DurableObject } from "cloudflare:workers";

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'cloudflare:'

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'cloudflare:'

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'cloudflare:'

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'cloudflare:'

S

sl0wik•11/12/24, 3:58 PM

My image-transforming worker just stopped working. Returnig response ignoring cf: image: {width: 300, height: 300, fit: 'cover', draw: null}.

Is anyone familiar with changes? I had it before with billing issues but all looks normal.

Ssl0wik My image-transforming worker just stopped working. Returnig response ignoring cf...

F

fry69•11/12/24, 4:00 PM

Open a ticket?

F

fry69•11/12/24, 4:00 PM

?support

F

Flare•11/12/24, 4:00 PM

To contact Cloudflare Support about an issue, please visit the Support Portal and fill in the form on the portal. After submission, you will receive confirmation over email.

Some issues, such as Account or Billing related issues, cannot be solved by the community.
Any plan level (including Free plans) can open tickets for Account, Billing or Registrar ticket categories. Make sure to select the correct category to ensure it goes to the right place.
For more information on the methods by which you can contact Support for your plan level, see Contacting Cloudflare Support - Cloudflare Docs

Ffry69 Open a ticket?

S

sl0wik•11/12/24, 4:16 PM

Are you aware is support ticket login would be the same as account login?

Jjohtso tsx chokes on this import `import { DurableObject } from "cloudflare:workers";` ...

.

.gwapes•11/12/24, 5:34 PM

Does

@cloudflare/workers

@cloudflare/workers

@cloudflare/workers

@cloudflare/workers work?

C

Constantin•11/12/24, 6:01 PM

hey there, do you have any snappy suggestion for generating pdfs with a worker?

C

Constantin•11/12/24, 6:02 PM

oh, found the lazyinvoice one

森

森@VerseLink (RW)•11/12/24, 8:02 PM

I think I might have found a bug with miniflare, can someone also confirm this is also a issue?

Reproduction step:
Passing a ReadableStream through a service binding RPC call

森

森@VerseLink (RW)•11/12/24, 8:02 PM

this is what it throws

森

森@VerseLink (RW)•11/12/24, 8:21 PM

and if you attempt to pass a Request with a body as a RPC call, you will get:

森

森@VerseLink (RW)•11/12/24, 8:21 PM

i feel like RPC with miniflare is exteremely buggy and I hope I'm not the one feeling about this

森森@VerseLink (RW)I think I might have found a bug with miniflare, can someone also confirm this i...

森

森@VerseLink (RW)•11/12/24, 8:26 PM

i think i figured out what might be happening, i'm trying to upload a file via rpc binding by passing readable stream; while the document says it supports passing readable stream / writable stream, the source code of miniflare seems to only support the case where we pass in readable stream and the rpc code expects a writable stream (or the other way around) to be returned by the code

森

森@VerseLink (RW)•11/12/24, 8:26 PM

i'm not sure if this is a bug, or a documentation error

森

森@VerseLink (RW)•11/12/24, 8:26 PM

can anyone confirm this?

森

森@VerseLink (RW)•11/12/24, 8:27 PM

(i'm leaning towards as a bug as it's an assertion error and not a explicit error being thrown)

森森@VerseLink (RW)(i'm leaning towards as a bug as it's an assertion error and not a explicit erro...

D

DaniFoldi•11/12/24, 8:29 PM

I recommend checking if there's a github issue for this, and if not, opening one - I also don't see a reason why it shouldn't work, and even if that is the case, the team can confirm

森

森@VerseLink (RW)•11/12/24, 8:33 PM

closest thing i could find is:
https://github.com/cloudflare/workers-sdk/issues/6047
which is never really fixed (this really hurts the dev experience btw)
but this is related to the second issue with RPC calls and not the first

GitHub

🐛 BUG: Miniflare R2 writeHttpMetadata - DevalueError: Cannot string...

Which Cloudflare product(s) does this pertain to? R2, Miniflare What version(s) of the tool(s) are you using? 3.60.3 [wrangler], 3.20240610.0 [miniflare] What version of Node are you using? 18.18.2...

L

LordSilver•11/12/24, 9:00 PM

How do you call the bolt thing kind of communication?

L

LordSilver•11/12/24, 9:01 PM

That's not true RPC right? Because RPC would generally involve a network boundary. A request going from microservice X to microservice Y through a service mesh. But in this case the two services are colocated in the same workspace so there's no actual network request.

森

森@VerseLink (RW)•11/12/24, 9:01 PM

just service binding, you can also invoke it the HTTP way (and not RPC)

森

森@VerseLink (RW)•11/12/24, 9:03 PM

the rest i guess is implementation details, i don't think there's a guarantee that the two services would be in the same workspace or even server at all; and in reality, most cross application boundary communications uses some form of RPC anyways, where they are on the same machine or not

D

daniel•11/12/24, 9:09 PM

my worker sends requests to a specific server on the cloudflare network. it's been working for months and it was working this morning but i just started receiving this error out of nowhere (no deployed code changes in the last few weeks on my worker).

can an employee confirm whether a change was made recently to block access to certain cloudflare ips from workers?

森森@VerseLink (RW)just service binding, you can also invoke it the HTTP way (and not RPC)

L

LordSilver•11/12/24, 9:36 PM

but that's just a fake HTTP, it's still using same magic under the hood

I

Isaac McFadyen•11/12/24, 9:48 PM

^ RPC is invariant of transport

I

Isaac McFadyen•11/12/24, 9:48 PM

You can RPC over a unix socket, over IPC boundaries, or over a network connection

I

Isaac McFadyen•11/12/24, 9:48 PM

Or even RPC in shared memory as is the case with some apps (see Tauri for example)

森

森@VerseLink (RW)•11/12/24, 10:36 PM

... sorry can i vent for a bit?

森

森@VerseLink (RW)•11/12/24, 10:36 PM

or if someone could let me know is there a better solution

森

森@VerseLink (RW)•11/12/24, 10:36 PM

how exactly do you detect if the worker is in dev mode or in production mode?

森

森@VerseLink (RW)•11/12/24, 10:37 PM

it looks like the official solution is to add [env.dev] and add something like ENVIRONMENT = "dev"

森

森@VerseLink (RW)•11/12/24, 10:37 PM

if that's the case....

森

森@VerseLink (RW)•11/12/24, 10:37 PM

then why is the majority of keys "NOT INHERITABLE"

森

森@VerseLink (RW)•11/12/24, 10:38 PM

why?
if it works both in staging / prod and dev, why should i have to copy every single vars under env.dev ?

森

森@VerseLink (RW)•11/12/24, 10:39 PM

i have like an array of vars that define a certain default output

anyone familiar with creating Dynamic image with honojs. I tried with svgs but on storing it on db i

Similar Threads

Similar Threads

Similar Threads