html2canvas объединить два блока в один

113
28 октября 2021, 02:20

взял два канваса из двух разных блоков, как мне их обьединить и получить одну картинку?

html2canvas(document.querySelector(".block-system")).then(canvas => {
   canvas.setAttribute('id', 'canvas1');
   document.body.appendChild(canvas);
});
html2canvas(document.querySelector(".finfo")).then(canvas => {
   canvas.setAttribute('id', 'canvas2');
   document.body.appendChild(canvas);
});

Answer 1

Нарисуйте содержимое обоих canvas на третьем:

let c1 = canvas1.getContext("2d") 
c1.fillStyle='steelblue' 
c1.fillRect(15,15,20,20); 
 
let c2 = canvas2.getContext("2d") 
c2.fillStyle='brown' 
c2.fillRect(5,5,60,40); 
 
let canvas3 = document.createElement("canvas") 
document.body.append(canvas3) 
canvas3.width = Math.max(+canvas1.width, +canvas2.width); 
canvas3.height = +canvas1.height + +canvas2.height; 
let ctx = canvas3.getContext("2d"); 
ctx.drawImage(canvas1, 0, 0) 
ctx.drawImage(canvas2, 0, canvas1.height)
canvas { 
  background: wheat 
}
<canvas height=50 width=50 id=canvas1></canvas> 
<canvas height=50 width=70 id=canvas2></canvas>

READ ALSO
Как импортировать юнит тест mocha из пакета meteor.js?
javascript

Как импортировать юнит тест mocha из пакета meteor.js?

Мое приложение с использованием Meteorjs полностью разбито по пакетам, в одном из пакетов есть файл security-ui

 97
Остановить setinterval
javascript

Остановить setinterval

День добрыйПодскажите, можно ли как нибудь остановить таймер, если он задан как setInterval("ФУНКЦИЯ()", 3000); ?

 93
Как загрузить несколько изображений в firebase с vue (+vuex)?
javascript

Как загрузить несколько изображений в firebase с vue (+vuex)?

Я учусь писать приложения на vuejs, решил сделать портфолио как тренировку, но застрял на одном моментеКод ниже добавляет одно изображение,...

 277
Вывод двух знаков в дробной части числа
javascript

Вывод двух знаков в дробной части числа

Kак правильно написать выражение - "только положительные числа и 2 знака после, если не ввели после запятой сотые, то записалось как00"

 94