Function tintSFSymbol

LSWeather.js:1161–1198

(image, color)

FUNCTION tintSFSymbol
------------------------------------------------------------------*/
async function tintSFSymbol(image, color) {
  let html = `
  <img id="image" src="data:image/png;base64,${Data.fromPNG(image).toBase64String()}" />
  <canvas id="canvas"></canvas>
  `;
  
  let js = `
    let img = document.getElementById("image");
    let canvas = document.getElementById("canvas");
    let color = 0x${color.hex};
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    let imgData = ctx.getImageData(0, 0, img.width, img.height);
    // ordered in RGBA format
    let data = imgData.data;
    for (let i = 0; i < data.length; i++) {
      // skip alpha channel
      if (i % 4 === 3) continue;
      // bit shift the color value to get the correct channel
      data[i] = (color >> (2 - i % 4) * 8) & 0xFF
    }
    ctx.putImageData(imgData, 0, 0);
    canvas.toDataURL("image/png").replace(/^data:image\\/png;base64,/, "");
  `;
  let wv = new WebView();
  await wv.loadHTML(html);
  let base64 = await wv.evaluateJavaScript(js);
  const tintedImage = Image.fromData(Data.fromBase64String(base64));

  // Above function expands the image based on Device scale, resize it to original image size
  const symbolCanvas=new DrawContext();
  symbolCanvas.opaque = false;
  symbolCanvas.size = image.size;
  symbolCanvas.drawImageInRect(tintedImage, new Rect(0,0,image.size.width,image.size.height));
  return symbolCanvas.getImage();
}
/*------------------------------------------------------------------
FUNCTION getTextWidth
------------------------------------------------------------------*/