Brooooooklyn / canvas

High performance skia binding to Node.js. Zero system dependencies and pure npm packages without any postinstall scripts nor node-gyp.
https://vercel.skia.rs
MIT License
1.68k stars 71 forks source link

echarts can not use loadImage #719

Open ahdg6 opened 10 months ago

ahdg6 commented 10 months ago

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 commented 10 months ago
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