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

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

$("#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>

Answer 2

$("#btnSave").click(function() { 
    html2canvas($("#firstshirt"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#previewImage").append(canvas);

        }
    });
});

检查这个小提琴：https://jsfiddle.net/8ypxW/3/

如何在点击时将div保存为图像？

2 个答案: