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

html2canvas не поддерживает большинство свойств css (кроме базовых), один из которых transform, как вы, возможно, уже знаете, и для этого, к сожалению, существует нет обходной путь (с использованием html2canvas).

Однако вы можете использовать библиотеку canvas JavaScript, называемую FabricJS, которая, по-видимому, наиболее подходит для обслуживания ваших назначение, например, манипулирование (перемещение, изменение размера, поворот и т.д.) загруженных пользователем изображений.

Лучшая часть использования этой библиотеки состоит в том, что вам не нужно будет использовать html2canvas или любые другие дополнительные библиотеки, чтобы сделать снимок экрана. Вы можете напрямую сохранить холст (сделать снимок экрана) в качестве изображения, так как FabricJS - это обычная библиотека.

Вот базовый пример, демонстрирующий, что:

var canvas = new fabric.Canvas('myCanvas', {
   backgroundColor: 'white'
});

function renderImage(e) {
   var imgUrl = URL.createObjectURL(e.target.files[0]);
   fabric.Image.fromURL(imgUrl, function(img) {
      // set default props
      img.set({
         width: 150,
         height: 150,
         top: 75,
         left: 75,
         transparentCorners: false
      });
      canvas.add(img);
      canvas.renderAll();
   });
}

function saveOnPC() {
   var link = document.createElement('a');
   link.href = canvas.toDataURL();
   link.download = 'myImage.png';
   link.click();
}

function saveOnServer() {
   $.post('https://your-site-name.com/save-image.php', {
      data: canvas.toDataURL()
   }, function() {
      console.log('Image saved on server!');
   });

   /* use the following PHP code for 'save-image.php' on server-side

   <? php
   $img = $_POST['data'];
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $fileData = base64_decode($img);
   $fileName = 'myImage.png';
   file_put_contents($fileName, $fileData);
	
   */
}

canvas{border:1px solid red}input{margin-bottom:6px}button{margin:10px 3px 0 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" onchange="renderImage(event)">
<canvas id="myCanvas" width="300" height="300"></canvas>
<button onclick="saveOnPC()">Save on PC</button>
<button onclick="saveOnServer()">Save on Server</button>

Ответ 4

Это будет только половина ответа. Как я уже сказал, другая половина будет полагаться на тип script, который вы используете для создания нового изображения.

Эта половина показывает, как вы можете захватывать все различные детали. Предполагая, что ваш красный ящик является вашим окном просмотра для нового изображения, это будет собирать детали по мере внесения изменений, чтобы вы могли передать их вместе с script, который будет создавать изображение.

Я предположил возможность записать следующие данные:

• Имя файла
• Размер файла
• Размеры
• Позиция
• Вращение

Вы можете, если хотите, удалить имя файла и присвоить ему имя.

HTML

<form method="post" action="">
  <button id="browse-btn">Browse Images</button>
  <input name="user_file[]" id="user_file" style="display: none; position: relative;overflow: hidden" multiple="" type="file" />
  <div class="new-multiple"></div>
  <button id="submit-btn" type="submit">Submit</button>
  <div class="meta-details">
    <ul>
      <li>
        <label>Name:</label>
        <span></span>
      </li>
      <li>
        <label>Size:</label>
        <span></span>
      </li>
      <li>
        <label>Width:</label>
        <span></span>
      </li>
      <li>
        <label>Height:</label>
        <span></span>
      </li>
      <li>
        <label>Top:</label>
        <span></span>
      </li>
      <li>
        <label>Left:</label>
        <span></span>
      </li>
      <li>
        <label>Rotation:</label>
        <span></span>
      </li>
    </ul>
  </div>
</form>

CSS

form button {
  margin: 3px;
}

.new-multiple {
  width: 400px !important;
  height: 400px !important;
  background: white;
  border: 2px solid #faa;
  border-radius: 3px;
  overflow: hidden;
}

.img-div {
  width: 200px;
  height: 200px;
}

.newly-added {
  width: 100%;
  height: 100%;
}

.img-selected {
  box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
  border: 2px solid rgb(145, 44, 94);
}

.ui-resizable-handle {
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  width: 14px;
  height: 14px;
}

.ui-resizable-nw {
  top: -7px;
  left: -7px;
}

.ui-resizable-ne {
  top: -7px;
  right: -7px;
}

.ui-resizable-e {
  top: calc(50% - 7px);
  right: -7px;
}

.ui-resizable-w {
  top: calc(50% - 7px);
  left: -7px;
}

.ui-resizable-sw {
  bottom: -7px;
  left: -7px;
}

.ui-resizable-se {
  right: -7px;
  bottom: -7px;
}

.ui-resizable-se.ui-icon {
  display: none;
}

.ui-rotatable-handle {
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  margin-left: calc(50% - 9px);
  bottom: -5px;
  width: 18px;
  height: 18px;
}

.meta-details ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: Arial, sans-serif;
  font-size: 9px;
}

.meta-details ul li label {
  display: inline-block;
  width: 45px;
}

JavaScript

$(function() {
  var inputLocalFont = $("#user_file");
  inputLocalFont.change(previewImages);

  function humanFileSize(bytes, si) {
    var thresh = si ? 1000 : 1024;
    if (Math.abs(bytes) < thresh) {
      return bytes + ' B';
    }
    var units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
    var u = -1;
    do {
      bytes /= thresh;
      ++u;
    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
    return bytes.toFixed(1) + ' ' + units[u];
  }

  function logMeta(d) {
    var $m = $(".meta-details ul li span");
    $m.eq(0).html(d.name);
    $m.eq(1).html(humanFileSize(d.size));
    $m.eq(2).html(d.width + " px");
    $m.eq(3).html(d.height + " px");
    $m.eq(4).html(d.top + " px");
    $m.eq(5).html(d.left + " px");
    $m.eq(6).html(d.rotateDeg + " &deg;");
  }

  function previewImages() {
    var fileList = this.files;
    var fileMeta = [];
    $.each(fileList, function(key, val) {
      fileMeta[key] = {
        name: val.name,
        size: val.size,
        modified: val.lastModified
      };
    });
    var anyWindow = window.URL || window.webkitURL;

    for (var i = 0; i < fileList.length; i++) {
      var $list = fileList[i];
      var $meta = fileMeta[i];
      var objectUrl = anyWindow.createObjectURL(fileList[i]);
      var $newDiv = $("<div>", {
        class: "img-div"
      });
      var $newImg = $("<img>", {
        src: objectUrl,
        class: "newly-added"
      }).appendTo($newDiv);
      $meta['width'] = $newImg.width();
      $meta['height'] = $newImg.height();
      $meta['rotateDeg'] = 0.000;
      $meta['top'] = $newImg.position().top;
      $meta['left'] = $newImg.position().left;
      $(".new-multiple").append($newDiv);
      $newDiv.draggable({
        drag: function(e, ui) {
          $meta['top'] = ui.position.top;
          $meta['left'] = ui.position.left;
          logMeta($meta);
          $newImg.data("meta", $meta);
        }
      });
      $newDiv.rotatable({
        rotate: function(e, ui) {
          $meta['rotateDeg'] = Math.round(ui.angle.degrees * 10000) / 10000;
          $meta['rotateRad'] = ui.angle.current;
          logMeta($meta);
          $newImg.data("meta", $meta);
        }
      });
      $newDiv.resizable({
        aspectRatio: true,
        handles: "ne, nw, e, se, sw, w",
        resize: function(e, ui) {
          $meta['width'] = ui.size.width;
          $meta['height'] = ui.size.height;
          logMeta($meta);
          $newImg.data("meta", $meta);
        }
      });
      $newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
      window.URL.revokeObjectURL(fileList[i]);
      console.log($meta);
      logMeta($meta);
      $newImg.data("meta", $meta);
    }
    $(".newly-added").on("click", function(e) {
      $(".newly-added").removeClass("img-selected");
      $(this).addClass("img-selected");
      e.stopPropagation();
    });

    $(document).on("click", function(e) {
      if ($(e.target).is(".newly-added") === false) {
        $(".newly-added").removeClass("img-selected");
      }
    });
  }
  $("button").button();
  $("#browse-btn").click(function(e) {
    e.preventDefault();
    $("#user_file").trigger("click");
  });
  $("#browse-btn").click(function(e) {
    e.preventDefault();
    $(this).parent().submit();
  });
  $("form").submit(function(e) {
    e.preventDefault();
    console.log("Prepared Meta Data:");
    $(".newly-added").each(function() {
      console.log($(this).data("meta"));
    });
    // AJAX Post Code will be entered here
  });
});

Сначала перейдите на @mpen здесь из преобразуя размер файла в байтах в удобочитаемую строку для функция преобразования размера файла.

Вы можете видеть, что мы создаем массив для хранения соответствующих деталей, которые связаны с файлом. Это обновляется по мере перемещения, изменения размера или поворота элемента. Вы можете отправить эти данные вместе с оригинальным изображением при отправке формы. Таким образом, по крайней мере, теперь создается пользовательский интерфейс.

Следующим шагом будет просмотр того, как вы хотите создать и сохранить изображение из этих деталей. Поэтому начните смотреть Обработка изображений для PHP. См., Что вы хотите использовать и запустить на этом back-end script.

Ответ 5

Вы пробовали rasterizeHTML?

Я процитирую это:

По соображениям безопасности рендеринг HTML в холст сильно ограничен... Однако это возможно, вставив HTML в SVG-изображение как a, а затем рисуя результирующее изображение через ctx.drawImage().

Вы можете найти проект на Github, там они объясняют, как использовать его:

https://github.com/cburgmer/rasterizeHTML.js