Объединить несколько холстов в один (для экспорта), используя ванильный Javascript - PullRequest
Новая
       15

Объединить несколько холстов в один (для экспорта), используя ванильный Javascript

0 голосов
/ 06 ноября 2018

Я нахожусь в ситуации, когда я генерирую несколько холстов (~ 200), где я рисую изображение, снятое с веб-камеры пользователя (экспериментируя с техникой "фотофиниша").

Я должен экспортировать эти холсты в виде простого JPEG, как показано на следующем рисунке.

multiple canvas as

Вы также можете увидеть, как это должно выглядеть визуально (несколько полос в виде нескольких холстов, те, которые я должен экспортировать как один-единственный Jpg).

enter image description here

Любая идея или направление, как действовать?

Заранее спасибо!

AW.

1 Ответ

0 голосов
/ 06 ноября 2018

Просто используйте drawImage () . Он принимает другой холст в качестве источника растрового изображения (первый параметр).

Так что вам нужно будет

  • определите размер вашего окончательного холста
  • определяет положение каждого меньшего холста
  • Нарисуйте эти 

// sizes of each strip
var width = 10;
var height = 200;
// we'll store each 'strip' canvas in an Array
var strips = [];
for(var i = 0; i<60; i++) {
  // fill the Array
  strips.push(makeStrip());
  // populate the doc
  container.appendChild(strips[i]);
}

// our merging canvas
var merger = document.createElement('canvas');
merger.width = width * 60; // sum of widths
merger.height = height;
var ctx = merger.getContext('2d');
// iterate through all our strips
strips.forEach(function drawToMerger(small, i) {
  // simply draw at index * width
  ctx.drawImage(small, i * width, 0);
});
// export
merger.toBlob(function(blob) {
  img.src = URL.createObjectURL(blob);
});

// Strip builder
function makeStrip() {
   var canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
   var ctx = canvas.getContext('2d');
   var grad = ctx.createLinearGradient(0,0,0,canvas.height);
   grad.addColorStop(0, randColor());
   grad.addColorStop(1, randColor());
   ctx.fillStyle = grad;
   ctx.fillRect(0,0,canvas.width,canvas.height);
   return canvas;
}
function randColor() { 
  return '#' + (Math.random()).toString(16).substr(2,6);
}
#container{white-space:nowrap}
canvas:hover{opacity:.7}
img{border: 3px solid #00FF00}
Strips:
<div id="container"></div>
Merged Image:
<img id="img">

Но учтите, что вы, возможно, захотите поработать над одним холстом с самого начала, это освободит память.

...