title: Mapped color transformation on cors tainted image
body: <p>I need to transform colors in an image obtained from an s3 server which disallows crossOrigin.</p>
  
  <p>This is the functionality I need:</p>
  
  <pre><code>  const img = new Image();
    img.src = src;
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const colors = [25,50,100,255];
    const data = imageData.data;
    for (let i = 0; i &lt; data.length; i += 4) {
      if(data[i] == 1){data[i] = colors[1]}
      if(data[i] == 2){data[i] = colors[2]}
      if(data[i] == 3){data[i] = colors[3]}
    }
  </code></pre>
  
  <p>but got tainted by crossOrigin error:</p>
  
  <p><a href="https://i.stack.imgur.com/fVq9V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fVq9V.png" alt="enter image description here"></a></p>
  
  <p><strong>I know I can not use <code>getImageData</code> in this case.</strong> I don't want to read the image data.</p>
  
  <p>But maybe complete my task through some other webGL / canvas operation?</p>
  
  <p>Rendering on a server or proxying is not possible.</p>