画像をクリックして保存する

Question

保存をクリックすると、画像としてdivを保存する方法に関する回答を探しています。私はどこにでも見えましたが、答えが見つからないようですが、DIVとプレビューボタンを使ってdivを画像に変換しています。私は画像として保存するために見つけた最も近いものはhttp://jsfiddle.net/epistemex/kyjs655r/これは私が画像として保存する必要があるものに近いですが、これはキャンバスであり、それは私のコードとは非常に似ていますコードが乱雑ですが、これは非常に似ていますhttps://jsfiddle.net/8ypxW/3/私は最初のURLから2番目の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>

秒URLに似ている私のスクリプトですより多くのコード私はそれを短くてシンプルに保つためにテキストボックスを使用しています。最初のURLと同じように、divの全体を画像としてクリックして保存します。

Answer 1

SOにはいくつか同じ質問があります。 Saving Div Contents or Canvas as Image How to take screenshot of a div with JavaScript? キャンバスを使用する方法の1つです。ソリューションの作業は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 
});