如何將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/