Error Loading Local PNG for drawImage [help]

[James-Firth]

I am trying to get a basic example working. This currently works using Expo's development server, but breaks when I attempt to build the iOS app to an iPad (I am using the Expo Bare Workflow).

The canvas allows me to draw simple shapes, so I know the canvas loads properly. I also tried calling drawImage on a remote url to ensure that worked.

However, when I try to load a local image the error event is fired.

1. The error callback seems to simply receive the entire Canvas object as a parameter. Is there a specific property within that object that can provide more details on the error? Right now I can't determine what's wrong just that something has gone wrong

2. Does anyone have experience loading local images with Expo if it is an error specific to this?

More context for what I have tried:

• My canvas object is currently using originWhitelist={["file://"]}.
• Remote images via https load fine (I used the same url as in the examples folder in this repo)
• I have viewed the filesystem and the path it specifies appears to be correct (and url-encoded)
• I have tried using Image.resolveAssetSource
• I have tried using Expo's Asset.fromModule
• I have tried changing the baseUrl to "/"
• I have moving the assignment to after defining the load
• I have tried simply drawing the image after creating it instead of waiting for the load event.

Please let me know if any more details would be useful, or if I'm simply missing something silly.

Thanks in advance!

Versions

• expo: ^40.0.1
• react-native: ~0.4.1
• react-native-canvas: ^0.1.37

[xwg2015]

the same problem

[chixor]

Has anyone found a work around for this? I'm trying to ctx.drawImage from a data URI retrieved with ctx.toDataURL() and that just throws an error as well. The error simply returns the canvas, as stated above. Loading from remote URL works fine :(

[ghost]

@chixor @xwg2015 , the workaround is to have your image already be data uri...

for example...

This is my image...

However, if you turn it into data uri and put it into a variable, you can use that and everything works fine!

// Data Uri
const iggle = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAYAAACm53kpAAAAAXNSR0IArs4c6QAAAmVJREFUWIXNlr9qG0EQxn9rUroQpImucGUwgmAkOZ0IlnA6k8ZwbyD8EkdIEe4t9Aaq07lIo85WjDEIv8Cp1RtMitye5la7q9OfQAbE7c1+3843n05zMgAFCGASmkXx9yIJGH3f5IwQtskZh3BD2BO92UlbdlN69++96xJz1CiOxLlpoP/Gp78Asc5k0pVMuhJbF1RPTSWmvBdAzq5PObs+JXSv6tX49guI8TtpixB/B/01fnXg6O68Kjqf5OJbj+7O8RngFtl2H2sgxo8ZuIP+TQPSryMseD7JRZYz75oS6xjgLa4b8InQfN1gjK9NOIZ+O8QkAWQ5A8C0B9Xahs6Z9oACSBz+fJID0Lsd8vvnL/rjDMq8zQH0x5mXr7GmPSCTLgC5eUaWs9qZPr6rORRa/zvfpohgjKkb4uR80bsd1szShvhMdcM2b9d9szbQnjOf5JUJsQZjX6CODQMAjDGNcsHiOxjYSVsk0xXQzECLSUruouTuW/+kk7bQ704L0EBfzgpw+dDMQNWA2Ee9JrY9oHc7XDdf5mxk0mUxXcmh9cEZNrKcRT8uHjWYNMZe9do9A/Xqczku3oex3FB9V7evftQAV4jPACvi8/cPoKZw6KOx+k+VnuL66suVWKD+562pfm2gsY9heZhZTFdif3tu9MdZhVH4av/Lp488PL6Kl7zGmIfH19B2lKvCO5CuLi94enmL6r+6vDBPL2/Rg7aJiE1D0a8uhQ3lj82HHfW7bwHhR7n6VgPrvGwRsHd00pbJzfPG0xXKe6KJgVH97oDblncbgPqAiub/QRyk/39o4KDYR/8f5Whc5mzps+YAAAAASUVORK5CYII=';

[ghost]

Proof

[ghost]

Example Code

import React from 'react';
import {Image, SafeAreaView, Text} from 'react-native';
import Canvas, {Image as CanvasImage} from 'react-native-canvas';

const App = () => {
  const iggle =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAYAAACm53kpAAAAAXNSR0IArs4c6QAAAmVJREFUWIXNlr9qG0EQxn9rUroQpImucGUwgmAkOZ0IlnA6k8ZwbyD8EkdIEe4t9Aaq07lIo85WjDEIv8Cp1RtMitye5la7q9OfQAbE7c1+3843n05zMgAFCGASmkXx9yIJGH3f5IwQtskZh3BD2BO92UlbdlN69++96xJz1CiOxLlpoP/Gp78Asc5k0pVMuhJbF1RPTSWmvBdAzq5PObs+JXSv6tX49guI8TtpixB/B/01fnXg6O68Kjqf5OJbj+7O8RngFtl2H2sgxo8ZuIP+TQPSryMseD7JRZYz75oS6xjgLa4b8InQfN1gjK9NOIZ+O8QkAWQ5A8C0B9Xahs6Z9oACSBz+fJID0Lsd8vvnL/rjDMq8zQH0x5mXr7GmPSCTLgC5eUaWs9qZPr6rORRa/zvfpohgjKkb4uR80bsd1szShvhMdcM2b9d9szbQnjOf5JUJsQZjX6CODQMAjDGNcsHiOxjYSVsk0xXQzECLSUruouTuW/+kk7bQ704L0EBfzgpw+dDMQNWA2Ee9JrY9oHc7XDdf5mxk0mUxXcmh9cEZNrKcRT8uHjWYNMZe9do9A/Xqczku3oex3FB9V7evftQAV4jPACvi8/cPoKZw6KOx+k+VnuL66suVWKD+562pfm2gsY9heZhZTFdif3tu9MdZhVH4av/Lp488PL6Kl7zGmIfH19B2lKvCO5CuLi94enmL6r+6vDBPL2/Rg7aJiE1D0a8uhQ3lj82HHfW7bwHhR7n6VgPrvGwRsHd00pbJzfPG0xXKe6KJgVH97oDblncbgPqAiub/QRyk/39o4KDYR/8f5Whc5mzps+YAAAAASUVORK5CYII=';
  // Pesudo CSS
  const safeViewStyle = {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  };
  const canvasStyle = {backgroundColor: 'white', width: 320, height: 320};

  // Game Canvas
  const gameCanvas = canvas => {
    canvas.width = 320;
    canvas.height = 320;

    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 400, 400);
    for (let i = 0; i < 4; i++) {
      ctx.fillStyle = 'black';
      ctx.fillRect(i * 80, i * 80, 80, 80);
    }
  };

  const imageRect = canvas => {
    canvas.width = 320;
    canvas.height = 320;
    const ctx = canvas.getContext('2d');

    const image = new CanvasImage(canvas);
    // image.src = require('./src/img/iggle.png');

    image.src = iggle;
    image.addEventListener('load', async () => {
      console.log('nice');
      return await ctx.drawImage(image, 0, 0, 16, 16, 80, 80, 80, 80);
    });
  };

  return (
    <SafeAreaView style={safeViewStyle}>
      <Text>Now the React Native Canvas works great!</Text>
      <Image source={require('./src/img/iggle.png')} />
      <Canvas style={canvasStyle} ref={gameCanvas} />
      <Canvas style={canvasStyle} ref={imageRect} />
    </SafeAreaView>
  );
};

export default App;

[Leslie-Wong-H]

Question: How to read a "file://" local image in react-native-canvas?

[Leslie-Wong-H]

This helps. #187