Javascript 对复制的图像所做的更改也会对原始图像进行更改。（js）

我复制了一个图像并对其进行了更改。不知何故，原始图像也得到了改变，这是不应该的。 有人知道怎么修吗

var thePhoto；
var theImage=null；
var theCanvas=null；
函数上传（）{
thePhoto=document.getElementById（“orgPhoto”）；
图像=新的简单图像（照片）；
canvas=document.getElementById（“mycanvas”）；
图像绘制到（Canvas）；
}
函数makeGray（）{
if（theCanvas==null | |！theCanvas.complete（））{
警报（“无照片”）；
}否则{
var GrayImage=新的简单图像（照片）；
for（GrayImage.values（）的变量像素）{
var avg=（pixel.getRed（）+pixel.getGreen（）+pixel.getBlue（））/3；
像素。设置为红色（平均值）；
像素设置绿色（平均值）；
像素。设定值（平均值）；
}
GrayImage.drawTo（Canvas）；
}
}

我不明白这一切的目的，但只要这样做，你就会在画布上看到灰色的图像

thePhoto = document.getElementById("orgPhoto");
  theCanvas = document.getElementById("mycanvas");
  var ctx = theCanvas.getContext("2d");
  ctx.filter='grayscale(100%)';
  ctx.drawImage(thePhoto, 20,20);

---

我不明白这一切是为了什么，但只要这样做，你就会得到画布上的灰色图像

thePhoto = document.getElementById("orgPhoto");
  theCanvas = document.getElementById("mycanvas");
  var ctx = theCanvas.getContext("2d");
  ctx.filter='grayscale(100%)';
  ctx.drawImage(thePhoto, 20,20);

---

在单击rest按钮应用更改后，我将获得原始图像。我不能理解你的问题。请详细说明。画布使用的同一变量theImage=new SimpleImage（thePhoto）；我只是解决了这个问题。我在函数upload（）中添加了var GrayImage&RainbowImage&RedImage；因此，我不需要使用var“theImage”来进行筛选，但我不确定这是否与“全局var”和“域var”问题有关。在单击rest按钮应用更改后，我得到了原始图像。我不能理解你的问题。请详细说明。画布使用的同一变量theImage=new SimpleImage（thePhoto）；我只是解决了这个问题。我在函数upload（）中添加了var GrayImage&RainbowImage&RedImage；所以我不需要使用var“theImage”来做过滤器，但我不确定它是否与“全局var”和“域var”问题有关。