Javascript 画布绘图在外部.js文件中不起作用_Javascript_Html_Canvas

Javascript 画布绘图在外部.js文件中不起作用

javascript html canvas

Javascript 画布绘图在外部.js文件中不起作用,javascript,html,canvas,Javascript,Html,Canvas,当我的脚本包含在html文件中时，它可以工作，但当我将其移动到外部.js文件时，画布不会绘制这是我的html文件： <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <title>Reveal R

当我的脚本包含在html文件中时，它可以工作，但当我将其移动到外部.js文件时，画布不会绘制

这是我的html文件：

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <title>Reveal RGB Values</title>
        <form action='/' method='POST' enctype='multipart/form-data'>
            <h1>Select file to upload:</h1>
            <br>
            <input type='file' name='file'>
            <input type='submit' value='submit'>
        </form>
        {% if status == 'uploaded'%}
        <h1>There will be a photo here</h1>
        <canvas id="frame"></canvas>
        <canvas id= "solution_frame"></canvas>
        <div id="solution"></div>
        {% endif %}

        <script type = text/javascript src="{{ url_for('static', filename='script.js') }}"></script>
    </body>

但是我画不出这个图像

    function draw_image(){
        base_image = new Image();
        // yay! jinja works here too.
        var image_url = '{{img_url}}';
        base_image.src = image_url;
        base_image.onload = function(){
            //context.drawImage(base_image, 0, 0);
            scale_to_fit(this);
        }
    }
    draw_image();

function scale_to_fit(img){
    //get the scale
    var scale = Math.min(frame.width/img.width, frame.height/img.height);
    var x = (frame.width/2) - (img.width/2) * scale;
    var y = (frame.height/2) - (img.height/2) * scale;
    context.drawImage(base_image,x,y,img.width*scale, img.height*scale);

我发现了一个类似的帖子，建议我加上这个

document.addEventListener('DOMContentLoaded',draw_image,false);

说脚本是在画布完全加载之前执行的，但这似乎不是问题所在

有人能看出我可能出了什么问题吗？谢谢

编辑！：我刚刚想到这个问题可能与使用Jinja检索图像源位置有关

我的问题似乎根本与html/js无关。我正在使用Jinja从服务器检索图像位置，而Jinja不用于该外部js文件。在我看来，函数需要保存在html文件中

没错。Jinja不会对静态包含的资产运行任何处理

我认为有两种方法可以解决你的问题

在script.js中硬编码URL：

或者在包含script.JS之前，从draw_image函数中删除该行，并在模板中设置该JS变量：

调试器控制台中是否出现任何问题？您应该打开调试器，并在“源”选项卡中启用“异常时暂停”“停止标志时暂停”图标。@doug65536我的问题似乎与html/js无关。我正在使用Jinja从服务器检索图像位置，而Jinja不用于该外部js文件。在我看来，函数需要保存在html文件中。带有内容和的脚本标记与带有指向具有相同内容的文件的src的空脚本标记之间没有区别。您可以通过查看调试器中的“网络”选项卡并检查响应来检查脚本请求获得的内容。但是，在打开“网络”选项卡后，您可能必须重新加载/重新创建问题-有时，除非您在重新加载时查看它，否则它不会捕获这些内容。这是有道理的，但由于某些原因，我无法获得两个脚本标记—一个在html页面中，一个引用外部.js文件。当我添加引用外部文件的第二个标记时，即使文件为空且所有工作代码仍在html脚本标记中，脚本也会停止工作。一旦我更改了脚本的顺序，它就工作了！再次感谢！

document.addEventListener('DOMContentLoaded',draw_image,false);

var image_url = '/path/to/image'

<script type='text/javascript'>
  const image_url = {{img_url}};
</script>

<script type='text/javascript' src="{{ url_for('static', filename='script.js') }}"></script>