Мой скрипт работает, когда он включен в файл html, но когда я перемещаю его во внешний файл. js, canvas не рисует.
это мой 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>
Во внешнем файле. js у меня есть два холста, которые успешно создаются (я вижу пустые заготовки, которые соответствуют размерам)
var frame = document.getElementById('frame');
frame.width = 800;
frame.height = 600;
var context = frame.getContext('2d');
var solution_frame = document.getElementById('solution_frame');
var solution_context = solution_frame.getContext('2d');
solution_frame.width = 25;
solution_frame.height = 25;
, но я не могу Нарисуйте изображение
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?