Цвет холста fillStyle не обновляется при изменении входного цвета ⇐ Javascript
Цвет холста fillStyle не обновляется при изменении входного цвета
У меня есть функция JavaScript, которая срабатывает при изменении поля ввода цвета с использованием атрибута onchange. Предполагается, что функция меняет цвет fillStyle холста на основе выбранного цвета на входе. Однако я столкнулся с проблемой, из-за которой цвет холста fillStyle не обновляется в браузере при изменении входного значения цвета. Вот соответствующий код:
асинхронная функция changbgcolor(e) { пусть selectedColor = e.value; console.log(выбранный цвет); // Создаем холст и загружаем изображение const Canvas = document.createElement('canvas'); const img = новое изображение (); img.id = "cimg"; img.src = URL(); img.onload = async () => { холст.ширина = img.naturalWidth; холст.высота = img.naturalHeight; const context = Canvas.getContext('2d'); // Очищаем холст context.clearRect(0, 0, холст.ширина, холст.высота); // Заливаем холст предоставленным цветом context.fillStyle = выбранный цвет; context.fillRect(0, 0, холст.ширина, холст.высота); // Рисуем изображение на очищенном холсте context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); // Преобразуем холст в URL-адрес данных const dataUrl = Canvas.toDataURL(); // Удаляем предыдущий холст и элементы изображения, если они существуют const previousCanvas = document.querySelector('canvas'); const previousImage = document.querySelector('#img'); если (предыдущийCanvas) { предыдущийCanvas.remove(); } если (предыдущее изображение) { предыдущееизображение.удалить(); } // Обновляем источник изображения на странице пусть f = ждут выборки (dataUrl); пусть frs = ждут f.blob(); пусть ul = URL.createObjectURL(frs) seturl(ul).init(); }
Проблема, с которой я столкнулся, заключается в том, что когда я меняю значение поля ввода цвета (e.value), цвет фона холста не обновляется в браузере, хотя я вижу, что переменная selectedColor содержит правильное значение цвета.
Я был бы признателен за любые идеи или предложения о том, что может быть причиной того, что цвет фона холста не обновляется при изменении входного значения цвета. Спасибо за помощь!
Дополнительная информация:
Я подтвердил, что функция вызывается при изменении поля ввода цвета. Изображение загружается правильно, а размеры холста соответствуют размерам изображения. Функция seturl(ul).init() используется для обновления источника изображения на странице и работает должным образом.
У меня есть функция JavaScript, которая срабатывает при изменении поля ввода цвета с использованием атрибута onchange. Предполагается, что функция меняет цвет fillStyle холста на основе выбранного цвета на входе. Однако я столкнулся с проблемой, из-за которой цвет холста fillStyle не обновляется в браузере при изменении входного значения цвета. Вот соответствующий код:
асинхронная функция changbgcolor(e) { пусть selectedColor = e.value; console.log(выбранный цвет); // Создаем холст и загружаем изображение const Canvas = document.createElement('canvas'); const img = новое изображение (); img.id = "cimg"; img.src = URL(); img.onload = async () => { холст.ширина = img.naturalWidth; холст.высота = img.naturalHeight; const context = Canvas.getContext('2d'); // Очищаем холст context.clearRect(0, 0, холст.ширина, холст.высота); // Заливаем холст предоставленным цветом context.fillStyle = выбранный цвет; context.fillRect(0, 0, холст.ширина, холст.высота); // Рисуем изображение на очищенном холсте context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); // Преобразуем холст в URL-адрес данных const dataUrl = Canvas.toDataURL(); // Удаляем предыдущий холст и элементы изображения, если они существуют const previousCanvas = document.querySelector('canvas'); const previousImage = document.querySelector('#img'); если (предыдущийCanvas) { предыдущийCanvas.remove(); } если (предыдущее изображение) { предыдущееизображение.удалить(); } // Обновляем источник изображения на странице пусть f = ждут выборки (dataUrl); пусть frs = ждут f.blob(); пусть ul = URL.createObjectURL(frs) seturl(ul).init(); }
Проблема, с которой я столкнулся, заключается в том, что когда я меняю значение поля ввода цвета (e.value), цвет фона холста не обновляется в браузере, хотя я вижу, что переменная selectedColor содержит правильное значение цвета.
Я был бы признателен за любые идеи или предложения о том, что может быть причиной того, что цвет фона холста не обновляется при изменении входного значения цвета. Спасибо за помощь!
Дополнительная информация:
Я подтвердил, что функция вызывается при изменении поля ввода цвета. Изображение загружается правильно, а размеры холста соответствуют размерам изображения. Функция seturl(ul).init() используется для обновления источника изображения на странице и работает должным образом.
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Элементы управления становятся невидимыми при изменении цвета фона холста в WinUI 3
Anonymous » » в форуме C# - 0 Ответы
- 28 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Элементы управления становятся невидимыми при изменении цвета фона холста в WinUI 3
Anonymous » » в форуме C# - 0 Ответы
- 17 Просмотры
-
Последнее сообщение Anonymous
-