getImageData() & putImageData() about react-native-canvas

[patiphannn]

I also have this issue.
Anyone have any idea?

Thanks in advance.

The following declaration of ImageData works:

import {webviewConstructor, webviewProperties} from './webview-binders';

@webviewProperties({
    data: null,
    height: 100,
    width: 100
})
@webviewConstructor('ImageData')
export default class ImageData {
    constructor(width, height, canvas) {
        this.canvas = canvas;

        if (this.onConstruction) {
            this.onConstruction(width, height);
        }
    }

    postMessage = message => {
        if (this.canvas)
            return this.canvas.postMessage(message);
    };

    addMessageListener = listener => {
        if (this.canvas)
            return this.canvas.addMessageListener(listener);
    };
}

But i need ImageData with pixels data inside to be able use it like this:

context.getImageData(0, 0, 100, 100)
          .then((imageData) => {
              const data = imageData.data;
              const length = Object.keys(data).length;
              for(let i = 0; i < length; i += 4) {
                  data[i] += 100;
                  data[i + 1] += 100;
                  data[i + 2] += 100;
              }

              const tmp = new ImageData(data, 100, 100, canvas); // Or Uint8ClampedArray.from(data) here
              context.putImageData(tmp, 0, 0);

          });

I tried to modify ImageData declaration to the following:

constructor(array, width, height, canvas) {
        ...
        if (this.onConstruction) {
            this.onConstruction(array, width, height);
        }
        ...
    }

But this does not work. I receive error

Do you have any idea why this might happens? Thanks

[nicolasdelfino]

Ok, I'll look at this as soon as I have the time.

[nicolasdelfino]

For anyone interested and waiting for this, I can't make time to prioritize this PR, please solve this issue on your own or contact @iddan for guidance.

[iddan]

If anyone wants to help checkout #49

[iddan]

You get a plain working object from getImageData. putImageData expects and object of type imageData. For that you need to invoke it with the ref of the result object from getImageData

[minemos]

Same here!
And I got this error.
Anyone else?

Error: The operation is insecure

[iddan]

Currently the ImageData interface is not implemented thus no, you can't

[nicolasdelfino]

Hi iddan, thanks for a great lib!
Im confused about this since I see you using this in your examples.
Cant get const image = new CanvasImage(this.reds.myCanvas) to work

[iddan]

ImageData and Image are different interfaces

[nicolasdelfino]

Hi, yeah I noticed that some days after my comment.

[iddan]

A PR will be welcome (basically implement the interface and connect it to the relevant components). Unfortunately I would not have the time to do it any time soon.

[nicolasdelfino]

Hi, been mega busy lately and I don't know when things are gonna clear up, still since this is a vital dependency in my application I´m gonna try to make time. Any example you can point me to to ease the process? looked at your source code and couldn't say I found an obvious way of implementing this.

[iddan]

In https://github.com/iddan/react-native-canvas/blob/master/src/Image.js:

@webviewProperties({crossOrigin: undefined, height: undefined, src: undefined, width: undefined})
@webviewEvents(['load', 'error'])
@webviewConstructor('Image')

Those are used to declare shared properties of the Image interface at the RN side and the WebView side.

constructor(canvas, width, height) {
    if (!(canvas instanceof Canvas)) {
      throw new Error('Image must be initialized with a Canvas instance');
    }
    this.canvas = canvas;
    if (this.onConstruction) {
      this.onConstruction();
    }
   // ...
  }

  postMessage = message => {
    return this.canvas.postMessage(message);
  };

  addMessageListener = listener => {
    return this.canvas.addMessageListener(listener);
  };

These make sure the constructed Image can send messages and receive messages from the canvas

In https://github.com/iddan/react-native-canvas/blob/master/src/webview.js:

const constructors = {
  Image,

is for declaring Image is constructible

[nicolasdelfino]

Hi @iddan thanks for the explanation! looked at it yesterday and got confused cause const data = await ctx.getImageData(0,0,100,100) seems to be working. Made a small canvas with a purple pixel and the data returned matches the rgba values of the pixel correctly.

So are some of the imageData methods implemented and some not? Didn't work with putImageData - tried to use it like: this.refs.otherCanvas.getContext('2d').putImageData(data)

Hello.
Thank you for this great package. Could you please point me to some spots how to implement putImageData() functionality? What i'm currently doing is:
I'm trying to extend Canvas with a function that will call putImageData() for context like this:
(0, _webviewBinders.webviewMethods)(['toDataURL', 'autoScale', 'putImageData'])
and this

{
    key: 'putImageData',
    value: function putImageData() {
        var context = this.element.getContext('2d');
        context.putImageData.apply(context, arguments));     
    }
  }

If i add trace log to handleMessage function of Canvas - i receive the following trace:

Could you please point me what i'm doing wrong. Need this functionality asap. Thanks

[iddan]

Hey there. As I mentioned before the first thing you need to do is to implement an ImageData constructor: (look for the @constructor decorator) and declare it in webview.js constructors. That way when shared between the webview and the RN runtime they will be aware for this object and it's state. Then as you done you'd have to add putImageData to webviewMethods.

To test your code you need to execute npm run build-to-examples in the root directory and then to try your code in the examples RN app.

Thank you for your quick reply. I'm trying to implement this approach.
I'm trying to add ImageData class as you wrote. I added the following class:

import {webviewConstructor} from './webview-binders';

@webviewConstructor('ImageData')
export default class ImageData {
    constructor(canvas, ...args) {
        this.canvas = canvas;
        if (this.onConstruction) {
            this.onConstruction(...args);
        }
    }

    postMessage = message => {
        return this.canvas.postMessage(message);
    };

    addMessageListener = listener => {
        return this.canvas.addMessageListener(listener);
    };
}

I added it to constructors in webview.js as you said:

const constructors = {
  Image,
  Path2D,
    ImageData,
};

I build src to dest and copy dest folder to examples/node_modules/react-native-canvas folder.
Then i try to create instance of this class like this: const tmp = new ImageData(canvas);

But i receive the following error:

Could you point me what i'm doing wrong and what i missed? Thanks

[iddan]

Everything you written you've done correctly

It seems the problem is in this lines:

if (this.onConstruction) {
     this.onConstruction(...args);
}

I receive the following error if they exist:

If i comment out these lines - error is gone. But if i try to use ImageData now as argument for putImageData function like this:

const tmp = new ImageData(canvas);
context.putImageData(tmp, 0, 0)

I receive the following error:

Do you have any idea what might be wrong?

[iddan]

Very simple: ImageData requires arguments https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData
Try to provide (array, width, height) or (width, height)

[iddan]

Can you PR this so I can try debugging it?

Sorry, it seems i don't have permissions to push new branch, so i can't create PR. I sent you patch file to email address from your profile on github

[bbhopesh]

HI @iddan, I need getImageData interface but version 0.2.0 is not yet published to npm. When do you plan to release it?

[iddan]

Hey @bbhopesh You can already with the latest version

[bbhopesh]

Can I? I am using version 0.1.37

I am using getImageData to get RGBA values of every pixel. Look the code snippet below. Object returned by getImageData doesn't have data, width or height properties which are standard in browser's canvas.

import Canvas, {Image as CanvasImage} from 'react-native-canvas'

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }


  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
	// Object printed by following line doesn't have any 'data', 'width' or 'height' field.
    console.log(ctx.getImageData(0, 0, 100, 100))
  }


  render() {
    return (<View style={styles.sectionContainer}>
      <Canvas ref={this.handleCanvas}/>
    </View>);
  }
}

const App: () => React$Node = () => {
  return (
    <>
    <MyComponent></MyComponent>
    </>);
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  }
});

export default App;

[bbhopesh]

Never mind, I followed the example app and realized getImageData returns a Promise.

[ASKNJ]

Hi @iddan ,

Can you please help me fix the issue that I am facing right now, correct me if I am wrong. Would save my lot of time and effort.

I am doing this on my mobile and it perfectly draws image on canvas with same width and height.
current width: 384 and height: 377
But when I am getting imageData from getImageData, it only gives me partial image data for quarter width and height.
It is working fine but not for the full image, my image is having effects partially.

Can you please suggest what I am doing wrong or if it is a bug itself?

This is my code snippet below:

` image.addEventListener('load', async (image) => {

        context.drawImage(image.target, 0, 0, canvas.width, canvas.height);
        const imageData = await context.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        console.log(imageData.width)
        const dataArr = Object.values(data);
        const dataSize = dataArr.length;

        for (let idx = 0; idx < dataSize; idx += 4) {
            var avg = (dataArr[idx] + dataArr[idx + 1] + dataArr[idx + 2]) / 3;
            dataArr[idx] = avg; // red
            dataArr[idx + 1] = avg; // green
            dataArr[idx + 2] = avg; // blue
        }
        const tmp = new ImageData(canvas, dataArr, 384, 377);
        context.putImageData(tmp, 0, 0);
    });`

Thanks in advance!