javascript - 如何在点击时将div另存为图像？

Question

我想知道如何在单击时将我的 div 保存到具有唯一名称的图像中。

我过去常常通过右键单击来保存图像，但现在不再有效，而且用户很难做到这一点。

我想做一些更简单的事情，假设您单击了预览图片，预览了图片，它有一个唯一的名称，该名称会自动放入图片上传框中。

我不希望它下载到我的文件中并检索它并手动上传图像。

如果您还有其他问题，请随时提出，谢谢。

$(function() {
  var element = $("#firstshirt"); // global variable
  var getCanvas; // global variable

  $("#btn-Preview-Image").on('click', function() {
    html2canvas(element, {
      allowTaint: true,
      logging: true,
      onrendered: function(canvas) {
        $("#previewImage").append(canvas);
        getCanvas = canvas;
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstshirt" class="container" style="float:left;">
  <center>
    <div id="wrapper">
      <div id="boxes" class="container5" style="float:center;">
        <div data-bind="foreach:items" class="fix_backround">
          <div class="item" data-bind="draggable:true,droppable:true">
            <center><span id="texter" class="text" data-bind="text:$data"></span>
              <input class="edit_text" />
            </center>
          </div>
        </div>
        <a href="" download><span id="image" class="preview-area"></span></a>
      </div>
    </div>
  </center>
  <br><br><br><br>
</div>
 
<input id="btn-Preview-Image" type="button" value="Preview" />
<p>
  <label form="file">Upload Downloaded Image:</label>
  <input type="file" name="file3" id="file3" required formvalidate>
</p>

Answer 1

如果我理解您的问题，您希望用户能够在上传之前看到图片。如果是这样，请尝试使用 FileReader除了 jQuery，它不需要任何东西。

$("#images").change(function() {

  // clear div (encase preview already exist)
  $(".gallery").empty(); 
  
  // get all the image
  var images = $("#images").prop('files');
  
  // loop through the images and display with FileReader
  $(images).each(function(e) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var $img = $("<img/>").attr('src', e.target.result); // creates the image
      $(".gallery").append($img); // adds the image to the div
    };
    reader.readAsDataURL(this); // passes the file data to reader
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label for="images">Image Upload:</label>
  <input type="file" id="images" name="images" multiple>
</p>
<div class="gallery"></div>