У меня есть два Javascript файла, оба настроены для генерации изображения из base64. Первый скрипт с именем stati c. js выглядит следующим образом.
var element = new Image();
element.src = "data:image/png;base64,..."
document.body.appendChild(element);
Я могу встроить скрипт на свой веб-сайт, используя следующий код, и изображение отображается без вопросы. (Чтобы увидеть полный код, включая base64, go здесь )
<body>
<script src="./static.js"></script>
</body>
Точно так же у меня есть второй скрипт, который я нашел в CodePen takashi , который преобразует изображение base64 в анимированный глюк. Я смог взять этот код и изменить его, используя то же изображение base64, что и код stati c, но с ошибкой (извините, но код действительно длинный даже без моего изображения base64, поэтому я просто включил ссылку). Код для моего изображения можно увидеть здесь . Обратите внимание, что хотя CodePen отображает HTML и Javascript на одной и той же странице, я разбил их на отдельные файлы.
Опять же, если я встраиваю скрипт в веб-страницу, он работает без проблем.
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
<script src="./glitch.js"></script>
</body>
Проблема, с которой я столкнулся, заключается в том, что ни один из кодов не имеет выделенного атрибута javascript function(), поэтому они работают только в том случае, если я встраиваю код, как указано выше. Для краткости, используя изображение stati c, если я добавлю выделенную функцию:
function isStatic() {
var element = new Image();
element.src = "data:image/png;base64,..."
document.body.appendChild(element);
}
, а затем попробую обратный вызов,
<body>
<script src="./static.js">
isStatic();
</script>
</body>
изображение не появится на веб-странице. дольше. То же самое происходит на сбитом изображении, когда я пытаюсь обернуть весь скрипт в функцию и затем выполнить обратный вызов.
Основная причина, по которой я пытался превратить каждый файл JS в функции, состоит в том, чтобы я мог объедините их в один файл (что я и сделал), а затем с помощью встроенного сценария, например
<script>
setInterval(function(isStatic) {
// This will be executed every 9 seconds
}, 9000);
setInterval(function(isGlitch) {
// This will be executed every 2 seconds
}, 2000);
</script>
, создайте изображение, которое переключается с stati c на слитый, а затем снова обратно.
Поскольку я не смог успешно превратить каждый JS файл / скрипт в его собственную функцию, я пытаюсь выяснить, есть ли лучший способ объединить мои Stati c и Соедините JS сценариев в один, или , если есть способ, которым я могу настроить веб-страницу для вызова каждого файла сценария индивидуально таким образом, чтобы создать все oop статических c и сбитых изображений, переключающихся назад и вперед.
Я искал в Google-сетях все, что описывает то, что я пытаюсь сделать визуально, но мне абсолютно нечего показать но целая куча сценариев о различных способах сбоя текста и / или изображений (только не о том, как заставить их начинать сначала c, а затем случайным образом). По сути, я хотел бы сделать с моими двумя сценариями
- run static image (script or call) for *x* seconds (120-180 seconds)
- run glitched image (script or call) for *x* seconds (3-5 seconds)
- reset (loop) the sequence
, чтобы создать видимость единственного изображения, которое кажется случайным сбоем по неизвестным причинам.