如何将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> 

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/