Как использовать html2canvas на всех соответствующих объектах jQuery - PullRequest
Новая
       12

Как использовать html2canvas на всех соответствующих объектах jQuery

0 голосов
/ 03 марта 2019

Как я могу поймать все сгенерированные идентификаторы div в jquery и сгенерировать одно изображение для каждого идентификатора div?

PHP 

foreach(range(1,$count) as $pin){
            echo "<div class='invite col-lg-6 col-xs-6' id='".$prefix.$pin."'>";

JQUERY 

$(".invite").each(function(i){
            var elm = $(this).attr('id');
            console.log(elm);
            var w = "600";
            var h = "300";
            var type = "png";
            var filename = "invite";
            html2canvas(elm).then(function(canvas){
                var canWith = canvas.with;
                var canHeight = canvas.height;
                var img = Canvas2Image.convertToImage(canvas, canWith, canHeight);
                Canvas2Image.saveAsImage(canvas, w, h, type, filename);
            });
    });

Мое решение не работает.Ловит все идентификаторы в массиве, и я не могу поймать один идентификатор за раз, чтобы сгенерировать изображение div с использованием html2canvas lib.

1 Ответ

0 голосов
/ 03 марта 2019

Вы перебираете .invite, используя each, поэтому вы должны получить разные идентификаторы, но не все.Так что здесь нет никаких проблем.Тем не менее, я вижу некоторые проблемы в вашем примере кода:

  1. Это должно иметь width не with.

  2. Это должно сохранитькак другое имя файла, но не то же самое.Вы просто сохраняете файл как filename и заменяете файл последним.

  3. Вы должны передать элемент, а не идентификатор элемента в html2canvas.

  4. Кроме того, передайте type в convertToImage`

Итак, у него не должно быть проблем: 

$(".invite").each(function(i){
  var elem = $(this);
  var elemId = elem.attr('id');
  var w = "600";
  var h = "300";
  var type = "png";
  var filename = "invite";
  html2canvas(elem).then(function(canvas){
    var canWidth = canvas.width;
    var canHeight = canvas.height;
    var img = Canvas2Image.convertToImage(canvas, canWidth, canHeight, type);
    Canvas2Image.saveAsImage(canvas, w, h, type, filename + '-' + elemId);
  });
});
...