сохранить div как изображение по клику

Question

Я искал ответ о том, как сохранить div как изображение, когда я нажимаю save. Я повсюду смотрел, но я не могу найти ответ, я использую DIV и кнопку предварительного просмотра, чтобы преобразовать div в изображение. Самое близкое, что я нашел для сохранения в качестве изображения, было http://jsfiddle.net/epistemex/kyjs655r/, это близко к тому, что мне нужно сохранить как изображение, но проблема в том, что это холст и его не работает с моим кодом, это очень похоже на то, что у меня есть код грязный, это очень похоже https://jsfiddle.net/8ypxW/3/ Я хотел бы интегрировать сохранение от первого URL ко второму URL.

Это мой сценарий он похож на второй URL

$(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; 
 
     } 
 
    }); 
 
    }); 
 
}); 
 

 
var myform = document.getElementById('myform'); 
 
myform.onsubmit = function(e) { /* do some validation on event here */ }; 
 
$("#wrapper").hover(function() { 
 
    $("#boxes").css("border-color", "red"); 
 
}, 
 
        function() { 
 
    $("#boxes").css("border-color", "transparent"); 
 
});

.container { 
 
    background-color: transparent; 
 
    width: 490px; 
 
    height: 500px; 
 
    border: 2px solid; 
 
    position: relative; 
 
    overflow: hidden; 
 
    /* Will stretch to specified width/height */ 
 
    background-size: 490px 500px; 
 
    background-repeat: no-repeat; 
 
} 
 
.container5 { 
 
    background-color: transparent; 
 
    width: 220px; 
 
    height: 320px; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input id="btn-Preview-Image" type="button" value="Preview"/> 
 
<center> 
 
    <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> 
 
</center> 
 
<br/> 
 
</center> 
 
</div> 
 
</div> 
 
<center> 
 
    <div id="previewImage"> 
 
    </div> 
 
</center>

Приведенный выше код, как предполагается, есть изображение, но я не хочу, чтобы добавить его, потому что нужно будет больше кода Я хочу сохранить его коротким и простым внутри их текстового поля, и я хочу сохранить весь div как изображение на клике, как первый URL-адрес

Answer 1

В SO есть несколько вопросов. Saving Div Contents or Canvas as Image How to take screenshot of a div with JavaScript? Один способ сделать это использовать холст. Рабочий раствор http://html2canvas.hertzen.com/

Here вы можете увидеть некоторые рабочие примеры использования этой библиотеки

Answer 2

Используйте эту библиотеку. ..

https://html2canvas.hertzen.com

Теперь просто выберите элемент и размер .. это будет сделать снимок, как изображение ..

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 
    }, 
    width: 300, 
    height: 300 
});