javascript将相同的图像加载到画布中两次

Question

您好我试图将相同的图像（本地存储）加载到两个不同的画布上。我碰到了跨越来源＆＃39;错误：

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.


<div id="container">
<img class='img' id="img" src="xx/test_image.png" />
<canvas id="canvas" width="320" height="210"></canvas>
<img class='img' id="img1" src="xx/test_image.png" />
<canvas id="canvas1" width="320" height="210"></canvas>

然后我在javascript中将图像加载到画布：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img_url = document.getElementById('img1').src
var cvs1 = document.getElementById('canvas1');
var ctx1 = cvs1.getContext('2d');


make_base();

  function make_base()
  {
    base_image = new Image();
    base_image.setAttribute('crossOrigin', 'anonymous');
    base_image.src = img_url
    base_image.onload = function(){
      ctx1.drawImage(base_image);
    }
  }

  canvas.addEventListener('mousemove', mousePos, false);

  function mousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var x = parseInt(evt.clientX - rect.left);
    var y = parseInt(evt.clientY - rect.top);
    var p = ctx1.getImageData(x, y, 1, 1).data;
    results.innerHTML = '<table style="width:100%;table-layout:fixed"><td>X: ' 
    + x + '</td><td>Y: ' + y + '</td><td>Red: ' 
    + p[0] + '</td><td>Green: ' + p[1] + '</td><td>Blue: ' 
    + p[2] + '</td><td>Alpha: ' + p[3]+"</td></table>";
    return {x, y};
}

但是我收到了交叉来源错误...任何帮助表示感谢。