photon usage on WebWorker #46

lu911 · 2020-09-19T12:16:08Z

Hello,
I want to use this library on Cloudflare workers. Cloudflare workers run on WebWorker environment.

I imported photon-rs on rust project and build with wasm-pack.

I get "RuntimeError: unreachable" error on some images converted into base64.

In docs, I saw an example utilizing canvas but are there other ways to store it on memory?

[Code]

const base64Encode = buf => {
  let string = '';
  (new Uint8Array(buf)).forEach(
    (byte) => {
      string += String.fromCharCode(byte)
    }
  );
  return btoa(string)
};

async function handleRequest(request) {
  const { PhotonImage } = wasm_bindgen;
  await wasm_bindgen(wasm);
  
  const url = `IMAGE_URL`;
  const headers = {};
  const originRequest = new Request(url, { headers: headers });
  const upstreamResponse = await fetch(originRequest);
  const base64 = base64Encode(await upstreamResponse.arrayBuffer());
  let data = base64.replace(/^data:image\/(png|jpg);base64,/, "");
  const image = PhotonImage.new_from_base64(data);
  return new Response('test', {status: 200})
}

[Error]

Uncaught (in promise)
RuntimeError: unreachable
    at <anonymous>:wasm-function[1829]:0x9b26a
    at <anonymous>:wasm-function[769]:0x7fc50
    at <anonymous>:wasm-function[1661]:0x99339
    at <anonymous>:wasm-function[1763]:0x9a7c9
    at <anonymous>:wasm-function[1120]:0x8dcfb
    at <anonymous>:wasm-function[499]:0x6e5a1
    at photonimage_new_from_base64 (<anonymous>:wasm-function[966]:0x88d97)
    at Function.new_from_base64 (worker.js:2618:24)
    at handleRequest (worker.js:3000:29)
Uncaught (in response)
Error: internal error

The text was updated successfully, but these errors were encountered:

silvia-odwyer · 2020-09-21T14:49:21Z

Hi @YukSeungChan Thanks for submitting this issue! I've had a look at your code, and it appears that the issue is related to the manner in which you're fetching your image, since the result is encoded as a string rather than as a buffer.

I've coded a small example to help out. This issue has also cropped up for someone else, so I'll update the docs to include an example also.

await fetch(image_url)
    .then(data => data.buffer())
    .then(buffer => {
        let b64 = buffer.toString('base64'); 
        let photon_image = photon.PhotonImage.new_from_base64(b64);
        // photon.grayscale(photon_image);
    });

Hope this helps 😄 If you have any other questions, let me know!

lu911 · 2020-09-21T16:51:57Z

Thanks for the answer.

I can't use node-fetch. How can I encode the ArrayBuffer of Web API to base64 in the browser?

The code I wrote above doesn't work.

souravsaraf123 · 2021-02-19T22:21:21Z

I am not able to use this library in web workers 😥

Can you please show us a full example on how to achieve this. ( I am fairly new to wasm )

So far my index.html contains :

<html>
    <body>

        <h1>Demonstrates loading a local file using Photon on a WebWorker thread 2</h1>
        <p><input type="file" onchange="newFiles(this);" /></p>
		
        <script>
            
        async function newFiles(element)
		{
            for (var i=0; i<element.files.length; i++)
			{
                await readFileAndProcess(element.files[i]);
            }
        }
		
		async function readFileAndProcess(file)
		{
			let arrayBuffer = await file.arrayBuffer();
			
			const worker = new Worker('photon-worker.js', {
				type: 'module'
			});
			
            worker.onmessage = function(e)
			{
                var img = document.createElement("img");
                img.setAttribute("src", e.data);
                document.body.appendChild(img);
            };
			
            worker.postMessage(arrayBuffer);
        }

        </script>
        
    </body>
</html>

My photon-worker.js file contains :

// TODO: what to import here ?

self.addEventListener('message', e =>
{
	console.debug('event passed to web worker : ', e);
	console.debug('data passed to web worker : ', e.data);
	let arrayBuffer = e.data;
	
	// TODO: how to get photon object here , so that i can call the function photon.from_base64() here
});

Thanks 👍

dtruffaut · 2022-09-30T22:50:42Z

For converting buffer to dataUrl (b64), you can check:
cloudflare/workerd#54 (comment)

suragch · 2023-09-21T08:49:44Z

I tried creating a minimal project expressing the problem:

https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

techwithdeo · 2023-11-15T05:34:42Z

I tried creating a minimal project expressing the problem:

https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

Here is an example of using Photon Image Library on Cloudflare Workers:
https://github.com/techwithdeo/cloudflare-workers

ccbikai · 2023-11-22T04:23:43Z

I tried creating a minimal project expressing the problem:

https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

Here is an example of using Photon Image Library on Cloudflare Workers: https://github.com/techwithdeo/cloudflare-workers/tree/main/photon-library

Great Works! Can you publish as an npm package?

ccbikai · 2023-11-22T09:42:47Z

I tried creating a minimal project expressing the problem:

https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

Here is an example of using Photon Image Library on Cloudflare Workers: https://github.com/techwithdeo/cloudflare-workers/tree/main/photon-library

Thanks, I deploy success

Support png: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=resize!820,400,1&format=png

Support jpg: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=resize!820,400,1&format=jpg

Support webp: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=resize!820,400,1&format=webp

techwithdeo · 2023-11-22T13:53:38Z

I tried creating a minimal project expressing the problem:

https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

Here is an example of using Photon Image Library on Cloudflare Workers: https://github.com/techwithdeo/cloudflare-workers/tree/main/photon-library

Thanks, I deploy success

https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=resize&options=820,400,1&format=png

https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=resize&options=820,400,1&format=jpg

https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=resize&options=820,400,1&format=webp

Glad to hear 😃

ccbikai · 2023-11-23T04:18:39Z

Support Watermark: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=watermark!https%3A%2F%2Fmt.ci%2Flogo.png,10,10
Support Pipe: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=resize!800,400,1|watermark!https%3A%2F%2Fmt.ci%2Flogo.png,10,10

techwithdeo · 2023-11-23T07:38:31Z

I

I tried creating a minimal project expressing the problem:

https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

Here is an example of using Photon Image Library on Cloudflare Workers: https://github.com/techwithdeo/cloudflare-workers/tree/main/photon-library

Great Works! Can you publish as an npm package?

I published a npm package for cloudflare workers: https://www.npmjs.com/package/@cf-wasm/photon

techwithdeo · 2023-11-23T07:41:04Z

Support Watermark: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=watermark&options=https%3A%2F%2Fmt.ci%2Flogo.png,10,10 Support Pipe: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&pipe=resize!800,400,1|watermark!https%3A%2F%2Fmt.ci%2Flogo.png,10,10

Can you share the source code if you don't mind?

ccbikai · 2023-11-23T08:54:07Z

Support Watermark: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=watermark&options=https%3A%2F%2Fmt.ci%2Flogo.png,10,10 Support Pipe: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&pipe=resize!800,400,1|watermark!https%3A%2F%2Fmt.ci%2Flogo.png,10,10

Can you share the source code if you don't mind?

Let me sort it out this weekend

ccbikai · 2023-11-24T11:56:36Z

Support Watermark: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&action=watermark&options=https%3A%2F%2Fmt.ci%2Flogo.png,10,10 Support Pipe: https://image.miantiao.me/?url=https%3A%2F%2Fstatic.miantiao.me%2Fbanner-big.jpeg&pipe=resize!800,400,1|watermark!https%3A%2F%2Fmt.ci%2Flogo.png,10,10

Can you share the source code if you don't mind?

@suragch @techwithdeo Look Here https://github.com/ccbikai/cloudflare-worker-image

techwithdeo · 2023-11-24T19:17:30Z

Thank you :)

matbrgz · 2024-01-05T07:43:14Z

I tried creating a minimal project expressing the problem:

https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

Here is an example of using Photon Image Library on Cloudflare Workers: https://github.com/techwithdeo/cloudflare-workers/tree/main/photon-library

Not working here :(
Failed to compile.
▲ ./app/img/[collection]/[id]/photon/photon_rs_bg.wasm
▲ Module not found: Can't resolve 'wbg'
▲
▲ https://nextjs.org/docs/messages/module-not-found
▲
▲ Import trace for requested module:
▲ ./app/img/[collection]/[id]/photon/index.js
▲ ./app/img/[collection]/[id]/route.js
▲ ./node_modules/next/dist/build/webpack/loaders/next-edge-app-route-loader/index.js?absolutePagePath=private-next-app-dir%2Fimg%2F%5Bcollection%5D%2F%5Bid%5D%2Froute.js&page=%2Fimg%2F%5Bcollection%5D%2F%5Bid%5D%2Froute&appDirLoader=bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGaW1nJTJGJTVCY29sbGVjdGlvbiU1RCUyRiU1QmlkJTVEJTJGcm91dGUmcGFnZT0lMkZpbWclMkYlNUJjb2xsZWN0aW9uJTVEJTJGJTVCaWQlNUQlMkZyb3V0ZSZwYWdlUGF0aD1wcml2YXRlLW5leHQtYXBwLWRpciUyRmltZyUyRiU1QmNvbGxlY3Rpb24lNUQlMkYlNUJpZCU1RCUyRnJvdXRlLmpzJmFwcERpcj0lMkZob21lJTJGY29vcGVyJTJGZGV2JTJGbWV0YS11Y2xvY2slMkZhcHAmYXBwUGF0aHM9JTJGaW1nJTJGJTVCY29sbGVjdGlvbiU1RCUyRiU1QmlkJTVEJTJGcm91dGUmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!
▲
▲ ./app/img/[collection]/[id]/pngs/pngs_bg.wasm
▲ Module not found: Can't resolve 'wbg'
▲
▲ https://nextjs.org/docs/messages/module-not-found
▲
▲ Import trace for requested module:
▲ ./app/img/[collection]/[id]/pngs/index.js
▲ ./app/img/[collection]/[id]/route.js
▲ ./node_modules/next/dist/build/webpack/loaders/next-edge-app-route-loader/index.js?absolutePagePath=private-next-app-dir%2Fimg%2F%5Bcollection%5D%2F%5Bid%5D%2Froute.js&page=%2Fimg%2F%5Bcollection%5D%2F%5Bid%5D%2Froute&appDirLoader=bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGaW1nJTJGJTVCY29sbGVjdGlvbiU1RCUyRiU1QmlkJTVEJTJGcm91dGUmcGFnZT0lMkZpbWclMkYlNUJjb2xsZWN0aW9uJTVEJTJGJTVCaWQlNUQlMkZyb3V0ZSZwYWdlUGF0aD1wcml2YXRlLW5leHQtYXBwLWRpciUyRmltZyUyRiU1QmNvbGxlY3Rpb24lNUQlMkYlNUJpZCU1RCUyRnJvdXRlLmpzJmFwcERpcj0lMkZob21lJTJGY29vcGVyJTJGZGV2JTJGbWV0YS11Y2xvY2slMkZhcHAmYXBwUGF0aHM9JTJGaW1nJTJGJTVCY29sbGVjdGlvbiU1RCUyRiU1QmlkJTVEJTJGcm91dGUmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!
▲
▲ > Build failed because of webpack errors
▲ error Command failed with exit code 1.

I'm using Cloudflare Pages.

techwithdeo · 2024-01-12T12:08:36Z

@matbrgz

I recently updated @cf-wasm/photon, and now it supports Cloudflare Workers, Cloudflare Pages, Next.js and node environment.

Use @cf-wasm/photon for Next.js (Webpack) as shown:

import * as photon from "@cf-wasm/photon/next";

daggy1234 · 2024-01-16T18:37:16Z

Oh you should definetly add this as a feature to the README, do open a PR!

junteudjio · 2024-01-20T21:14:20Z

hi @techwithdeo @ccbikai ,
Thanks very much for posting your solutions. both work great!!!
However, webp images become grayscale, any idea how to preserve the RGB colors for webp images?
That would be very much appreciated.
Thanks in advance.

fineshop · 2024-05-31T12:40:40Z

Web Workers (using Webpack bundler):
https://github.com/fineshopdesign/cf-wasm/tree/main/packages/photon#web-worker
or you can use esm.sh

Cloudflare Workers:
https://github.com/fineshopdesign/cf-wasm/tree/main/packages/photon#cloudflare-workers

Next.js (App router + Edge Runtime):
https://github.com/fineshopdesign/cf-wasm/tree/main/packages/photon#nextjs-app-router

Next.js (Pages router + Edge Runtime):
https://github.com/fineshopdesign/cf-wasm/tree/main/packages/photon#nextjs-pages-router

silvia-odwyer added the bug Something isn't working label Sep 19, 2020

silvia-odwyer removed the bug Something isn't working label Sep 21, 2020

Saeris mentioned this issue Sep 21, 2020

RejectionError: unreachable on Call to photon.PhotonImage.new_from_base64 (WASM-Node) #45

Open

millette mentioned this issue Jan 26, 2024

web workers ? #152

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

photon usage on WebWorker #46

photon usage on WebWorker #46

lu911 commented Sep 19, 2020

silvia-odwyer commented Sep 21, 2020 •

edited

lu911 commented Sep 21, 2020 •

edited

souravsaraf123 commented Feb 19, 2021 •

edited

dtruffaut commented Sep 30, 2022

suragch commented Sep 21, 2023

techwithdeo commented Nov 15, 2023 •

edited

ccbikai commented Nov 22, 2023

ccbikai commented Nov 22, 2023 •

edited

techwithdeo commented Nov 22, 2023

ccbikai commented Nov 23, 2023 •

edited

techwithdeo commented Nov 23, 2023

techwithdeo commented Nov 23, 2023

ccbikai commented Nov 23, 2023

ccbikai commented Nov 24, 2023

techwithdeo commented Nov 24, 2023

matbrgz commented Jan 5, 2024

techwithdeo commented Jan 12, 2024 •

edited

daggy1234 commented Jan 16, 2024

junteudjio commented Jan 20, 2024

fineshop commented May 31, 2024 •

edited

photon usage on WebWorker #46

photon usage on WebWorker #46

Comments

lu911 commented Sep 19, 2020

silvia-odwyer commented Sep 21, 2020 • edited

lu911 commented Sep 21, 2020 • edited

souravsaraf123 commented Feb 19, 2021 • edited

dtruffaut commented Sep 30, 2022

suragch commented Sep 21, 2023

techwithdeo commented Nov 15, 2023 • edited

ccbikai commented Nov 22, 2023

ccbikai commented Nov 22, 2023 • edited

techwithdeo commented Nov 22, 2023

ccbikai commented Nov 23, 2023 • edited

techwithdeo commented Nov 23, 2023

techwithdeo commented Nov 23, 2023

ccbikai commented Nov 23, 2023

ccbikai commented Nov 24, 2023

techwithdeo commented Nov 24, 2023

matbrgz commented Jan 5, 2024

techwithdeo commented Jan 12, 2024 • edited

daggy1234 commented Jan 16, 2024

junteudjio commented Jan 20, 2024

fineshop commented May 31, 2024 • edited

silvia-odwyer commented Sep 21, 2020 •

edited

lu911 commented Sep 21, 2020 •

edited

souravsaraf123 commented Feb 19, 2021 •

edited

techwithdeo commented Nov 15, 2023 •

edited

ccbikai commented Nov 22, 2023 •

edited

ccbikai commented Nov 23, 2023 •

edited

techwithdeo commented Jan 12, 2024 •

edited

fineshop commented May 31, 2024 •

edited