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

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

11.04.2024, 12:34. Показов 939. Ответов 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
1222 / 1110 / 173
Регистрация: 21.01.2024
Сообщений: 5,099
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
1222 / 1110 / 173
Регистрация: 21.01.2024
Сообщений: 5,099
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
1222 / 1110 / 173
Регистрация: 21.01.2024
Сообщений: 5,099
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
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru