Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

echarts can not use loadImage #719

Open
ahdg6 opened this issue Sep 9, 2023 · 1 comment
Open

echarts can not use loadImage #719

ahdg6 opened this issue Sep 9, 2023 · 1 comment

Comments

@ahdg6
Copy link

ahdg6 commented Sep 9, 2023

Hey, the issue has been resolved. Just need to change the echarts settings to the following content. I will keep this problem open for others to reference. (Attention: You must use echarts with base64 only)

echarts.setPlatformAPI({
  createCanvas() {
    return createCanvas(32, 32);
  },
  loadImage(source, onload, onerror) {
    const img = new Image();
    const commaIdx = source.indexOf(',')
    const encoding = source.lastIndexOf('base64', commaIdx) < 0 ? 'utf-8' : 'base64'
    const data = Buffer.from(source.slice(commaIdx + 1), encoding)
    img.src = data;
    return img;
  }
});

Old:

echarts.setPlatformAPI({
  createCanvas() {
    return createCanvas();
  },
  loadImage(src, onload, onerror) {
    const img = new Image();
    // No need to bind context, echarts fixed it.
    // img.onload = onload.bind(img);
    // img.onerror = onerror.bind(img);
    
    // The problem lies here: Echarts believes that it should be base64, but @napi-rs/canvas operates with Buffer. (works fine with node-canvas)
    img.src = src; 
    return img;
  }
});

when pass it with base64, it throws Error: Failed to create reference from Buffer
when pass it with Buffer, it throws Error: Unsupported image type

@twlite
Copy link
Contributor

twlite commented Sep 9, 2023

echarts.setPlatformAPI({
  createCanvas() {
    return createCanvas();
  },
  loadImage(src, onload, onerror) {
    const img = new Image();
    // No need to bind context, echarts fixed it.
    // img.onload = onload.bind(img);
    // img.onerror = onerror.bind(img);
    
    // The problem lies here: Echarts believes that it should be base64, but @napi-rs/canvas operates with Buffer. (works fine with node-canvas)
    img.src = src; 
    return img;
  }
});

when pass it with base64, it throws Error: Failed to create reference from Buffer when pass it with Buffer, it throws Error: Unsupported image type

@napi-rs/canvas comes with loadImage function which supports base64

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants