Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531

Копировать canvas в другой canvas

11.04.2024, 12:34. Показов 1025. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Никак не могу понять, что не так. У меня есть один canvas id='canvas_crop' он может быть любых размеров, и есть canvas id='myCanvas' с размерами 250х322 px


я пытаюсь скопировать один canvas в другой, но получаю ошибку. В чём может быть проблема?
___
Code
1
2
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.
    at HTMLInputElement.saveImgProp
___


JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function saveImgProp(event) {
console.log('CLICK save');
 
var canvasCOPY = document.getElementById('canvas_crop');
var contextCOPY = canvasCOPY.getContext('2d');
 
var canvasPASTE = document.getElementById('myCanvas');
var contextPASTE = canvasPASTE.getContext('2d');
 
contextPASTE.drawImage(contextCOPY, 0, 0, 250, 322);
 
document.querySelector('#image_crop').style.visibility = 'hidden';
contextCOPY.setTransform(1, 0, 0, 1, 0, 0);
contextCOPY.clearRect(0, 0, canvasCOPY.width, canvasCOPY.height);
document.getElementById('imgInp').value = '';
document.getElementById('imgInp').value = null;
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
11.04.2024, 12:34
Ответы с готовыми решениями:

Canvas html5, как разместить черный пискель в центре canvas'a?
как разместить черный пискель в центре canvas'a?

Canvas
Нужны такие же линии canvas, как там на заднем фоне анимированные. Нигде не нашел. Где взять код, ребят?

Canvas
Здравствуйте, не могу понять как отрисовывать с помощью canvas в реальном времени. Пишу простенькую программу(Виселица): пользователю...

5
 Аватар для voraa
1276 / 1242 / 185
Регистрация: 21.01.2024
Сообщений: 5,734
11.04.2024, 13:14
JavaScript
1
contextPASTE.drawImage(canvasCOPY, 0, 0, 250, 322);
0
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531
12.04.2024, 08:09  [ТС]
да, осталось решить ещё одну проблему.

Когда я создаю canvasCOPY я прописываю ему параметры 800х600 px и картинка уменьшается/увеличивается под эти параметры в этот canvas, в данном случае картинка имеет исходные размеры 1600х1200, и после уменьшения, когда я копирую уже уменьшенную картинку из canvasCOPY в canvasPASTE у меня уже копируется урезанная в качестве картинка.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var img = new Image();      // Новый объект
  img.onload = function() { // Событие которое будет исполнено в момент когда изображение будет загружено
  
  var canvasCOPY = document.getElementById('canvas_crop');
  var contextCOPY = canvas.getContext('2d');
 
  const desiredWidth = img.width;
  const desiredHeight = img.height;
        
  const sizeWidth = 800;
  const sizeHeight = 600;
 
  contextCOPY.drawImage(img, 0, 0, desiredWidth, desiredHeight, 0, 0, desiredWidth, desiredHeight);
}
img.src = 'myImage.png';    // Путь к изображению
Да, и я никак понять не могу в чём дифференциальная разница между const, let, var

Ну const = вернее понять ещё можно, это наверное переменная, которая не изменяется, ну типа числа PI раз создав уже не поменять (я думаю так)

а вот разница между let, var?

на с++ там ещё как-то ясно uint8_t - число без минуса 8 бит (256 в десятичной максимум), String и т.п.
а let и var в чём отличие...
0
 Аватар для voraa
1276 / 1242 / 185
Регистрация: 21.01.2024
Сообщений: 5,734
12.04.2024, 08:37
Цитата Сообщение от SergeyKagen Посмотреть сообщение
Да, и я никак понять не могу в чём дифференциальная разница между const, let, var
Учить язык. Долго и внимательно читать учебник
(мне его тут лень переписывать)
Цитата Сообщение от SergeyKagen Посмотреть сообщение
на с++ там ещё как-то ясно uint8_t
В js нет строгой типизации.

Добавлено через 10 минут
Canvas - это просто матрица из пикселей.
Вы создали канвас 800х600 (матрицу из пикселей 800х600). Только эти пиксели и есть. Записали в нее картинку 1600х1200. Она как то ужалась с потерями информации. Кроме этих пикселей 800х600 в канвас ничего нет. Нет никакой информации об исходной картинке.
Это как в пайнте (редакторе). Взять картинку, уменьшить ее в 2 раза, сохранить в файл. Все. Есть только файл с уменьшеной картинкой. Исходную из него никак не получить. Можно растянуть, но с потерей качества.
0
7 / 8 / 3
Регистрация: 02.04.2018
Сообщений: 531
12.04.2024, 09:04  [ТС]
Да, я понимаю, что после сжатия не восстановишь. Я задаюсь вопросом как сделать лучше.
Не знаю правильно ли я мыслю. Я думаю так, мне нужно создать ещё один невидимый 'hidden' canvas , который будет уже шириной и высотой с картинку и фактически будет хранить её без сжатия, затем уже копировать этот canvas в тот canvas где нужно уменьшить изображение до 800 на 600, и итоговый canvas PASTE после всех необходимых манипуляций. И после всех манипуляций логично нужно очистить область памяти canvas, чтобы они не грузили браузер, если картинка будет больших размеров.
Правильно ли я думаю? Поправьте если не так.
0
 Аватар для voraa
1276 / 1242 / 185
Регистрация: 21.01.2024
Сообщений: 5,734
12.04.2024, 09:12
Цитата Сообщение от SergeyKagen Посмотреть сообщение
'hidden' canvas
Есть специальный OffscreenCanvas.
Такой же канвас, только невидимый - для него нет элемента в DOM. Но с ним можно производить все действия, как с обычным канвас, но они не отображаются на экране (поэтому быстрее). А потом брать итоговое содержимое для переноса в обычный канвас
https://developer.mozilla.org/... reenCanvas
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
12.04.2024, 09:12
Помогаю со студенческими работами здесь

Canvas
Скрипт почему-то работает при конечном значении меньше 13. Если оно больше 13, то в канвасе ничего не рисуется. В чем может быть проблема? ...

Можно ли сказать, что контекст canvas - объект, определяющий свойства canvas?
Можно ли сказать, что контекст canvas - объект, определяющий свойства canvas?

Можно ли одной процедурой рисовать на Image.Canvas и Printer.Canvas
Здравствуйте, пожалуйста, подскажите можно ли одной процедурой рисовать на Image.Canvas и Printer.Canvas?

Canvas JS столкновения, Как придать твёрдость объекту на HTML5 Canvas
Всем привет! Недавно начал изучать HTML5 Canvas, столкнулся с проблемой... Мне надо сделать функцию "makeSolid", чтобы...

построить функцию y=kx+b (линейная функция) с помощью Vcart или canvas (form.canvas)
Надо построить функцию y=kx+b (линейная функция) с помощью Vcart или canvas (form.canvas)


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru