Javascript 为什么点击变色js功能后img不可见？

我有一个django项目，包括使用js的change color函数，但是在我使用这些函数之后，img将不可见。顺便说一句，这个img已经上传到cloudinary。我需要重新配置什么

下面是用于更改颜色的js函数，我已经设置了img.crossOrigin=''以防止出现“getImageData”错误：

var mug = document.getElementById("mug");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;

function getPixels(img) {
    img.crossOrigin = '';
    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
    originalPixels = ctx.getImageData(0, 0, img.width, img.height);
    currentPixels = ctx.getImageData(0, 0, img.width, img.height);

    img.onload = null;
}


function hexToRGB(hex)
{
var long = parseInt(hex.replace(/^#/, ""), 16);
return {
    R: (long >>> 16) & 0xff,
    G: (long >>> 8) & 0xff,
    B: long & 0xff
  };
 }

function changeColor()
{
    var mug = document.getElementById("mug");
    if(!originalPixels) return; // Check if image has loaded
    var newColor = hexToRGB(document.getElementById("color").value);

    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
    {
        if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
        {
            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
        }
    }

    ctx.putImageData(currentPixels, 0, 0);
    mug.src = canvas.toDataURL("image/png");
}

function changeColor1()
{
    var mug = document.getElementById("mug");
    if(!originalPixels) return; // Check if image has loaded
    var newColor = hexToRGB(document.getElementById("color1").value);
        {

    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
    {
        if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
        }
    }

    ctx.putImageData(currentPixels, 0, 0);
    mug.src = canvas.toDataURL("image/png");
}

function changeColor2()
{
    var mug = document.getElementById("mug");
    if(!originalPixels) return; // Check if image has loaded
    var newColor = hexToRGB(document.getElementById("color2").value);
        {

    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
    {
        if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
        }
    }

    ctx.putImageData(currentPixels, 0, 0);
    mug.src = canvas.toDataURL("image/png");
}

function changeColor3()
{
    var mug = document.getElementById("mug");
    if(!originalPixels) return; // Check if image has loaded
    var newColor = hexToRGB(document.getElementById("color3").value);
        {

    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
    {
        if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
        }
    }

    ctx.putImageData(currentPixels, 0, 0);
    mug.src = canvas.toDataURL("image/png");
}

var mug=document.getElementById（“mug”）；
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var originalPixels=null；
var currentPixels=null；
函数getPixels（img）{
img.crossOrigin=''；
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0，0，img.naturalWidth，img.naturalHeight，0，0，img.width，img.height）；
原始像素=ctx.getImageData（0,0，img.width，img.height）；
currentPixels=ctx.getImageData（0，0，img.width，img.height）；
img.onload=null；
}
函数hexToRGB（hex）
{
var long=parseInt（十六进制替换（/^#/，“”），16）；
返回{
R：（长>>>16）和0xff，
G:（长>>>8）和0xff，
B:long&0xff
};
}
函数changeColor（）
{
var mug=document.getElementById（“mug”）；
if（！originalPixels）return；//检查图像是否已加载
var newColor=hexToRGB（document.getElementById（“color”）.value）；
对于（变量I=0，L=originalPixels.data.length；I0）//如果它不是透明像素
{
currentPixels.data[I]=originalPixels.data[I]/255*newColor.R；
currentPixels.data[I+1]=originalPixels.data[I+1]/255*newColor.G；
currentPixels.data[I+2]=原始像素.data[I+2]/255*newColor.B；
}
}
ctx.putImageData（当前像素，0,0）；
mug.src=canvas.toDataURL（“image/png”）；
}
函数changeColor1（）
{
var mug=document.getElementById（“mug”）；
if（！originalPixels）return；//检查图像是否已加载
var newColor=hexToRGB（document.getElementById（“color1”）.value）；
{
对于（变量I=0，L=originalPixels.data.length；I0）//如果它不是透明像素
currentPixels.data[I]=originalPixels.data[I]/255*newColor.R；
currentPixels.data[I+1]=originalPixels.data[I+1]/255*newColor.G；
currentPixels.data[I+2]=原始像素.data[I+2]/255*newColor.B；
}
}
ctx.putImageData（当前像素，0,0）；
mug.src=canvas.toDataURL（“image/png”）；
}
函数changeColor2（）
{
var mug=document.getElementById（“mug”）；
if（！originalPixels）return；//检查图像是否已加载
var newColor=hexToRGB（document.getElementById（“color2”）.value）；
{
对于（变量I=0，L=originalPixels.data.length；I0）//如果它不是透明像素
currentPixels.data[I]=originalPixels.data[I]/255*newColor.R；
currentPixels.data[I+1]=originalPixels.data[I+1]/255*newColor.G；
currentPixels.data[I+2]=原始像素.data[I+2]/255*newColor.B；
}
}
ctx.putImageData（当前像素，0,0）；
mug.src=canvas.toDataURL（“image/png”）；
}
函数changeColor3（）
{
var mug=document.getElementById（“mug”）；
if（！originalPixels）return；//检查图像是否已加载
var newColor=hexToRGB（document.getElementById（“color3”）.value）；
{
对于（变量I=0，L=originalPixels.data.length；I0）//如果它不是透明像素
currentPixels.data[I]=originalPixels.data[I]/255*newColor.R；
currentPixels.data[I+1]=originalPixels.data[I+1]/255*newColor.G；
currentPixels.data[I+2]=原始像素.data[I+2]/255*newColor.B；
}
}
ctx.putImageData（当前像素，0,0）；
mug.src=canvas.toDataURL（“image/png”）；
}

下面是我的模板文件：

{% extends 'base.html' %}
{% load static %}


{% block content %}

<script src="{% static 'js/color_change.js' %}" type="text/javascript"></script>
<div class="container">
    <h1>{{ details.name }}</h1>
    <div id="colorpicker"></div>
    <img id="mug" width="500" height="500" src="{{ details.img.url }}"  onload="getPixels(this)"/>
     <button id="color1" value="#33FFBD" type="button" onclick="changeColor1();" style="background-color: #33FFBD;width: 50px;height: 50px;"></button>
    <button id="color2" value="#FFA500" type="button" onclick="changeColor2();" style="background-color: orange;width: 50px;height: 50px;"></button>
    <button id="color3" value="#b22222" type="button" onclick="changeColor3();" style="background-color: firebrick;width: 50px;height: 50px;"></button>
    <p>{{ details.desc }}</p>
</div>
{% endblock %}

{%extends'base.html%}
{%load static%}
{%block content%}
{{details.name}
{{details.desc}}

{%endblock%}

单击js函数按钮后，img src将为“数据：图像/png；base64，iVBORw0KGgo……”。单击js函数按钮后，img src将为“数据：图像/png；base64，iVBORw0KGgo……”。