Leinwandbild in Modal anzeigen, basierend auf der Benutzerauswahl

Question

Ich habe bereits eine Arbeitsvorlage (nicht modal), wo jedes Mal, wenn der Benutzer wählt, eine Zeichnung und Farbe in der Leinwand angezeigt wird. Nun, was ich brauchte, ist, dass, bevor der Benutzer es an meine Datenbank übermittelt, ich möchte ein Modal, das die Zusammenfassung anzeigen (funktioniert bereits) und die Leinwand Bild (mein Problem). Es ist, als würde ich das Bild einfach so kopieren, wie es von der ersten Vorlage aussieht.

meine JS für die Leinwand-Display, verschiedene Datei:

function display() { 
 
var canvas = document.getElementById('displaycanvas'); 
 
context = canvas.getContext('2d'); 
 
context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    if(document.getElementById('color1').checked){ 
 
     context.strokeStyle="#FF0000"; 
 
    } else if(document.getElementById('color2').checked){ 
 
     context.strokeStyle="#0000FF"; 
 
    } 
 
    if (document.getElementById('shape1').checked) { 
 
      context.beginPath(); 
 
      context.arc(95,50,40,0,2*Math.PI); 
 
      context.stroke();  } 
 

 
    if (document.getElementById('shape2').checked) { 
 
      context.beginPath(); 
 
      context.rect(50, 27, 50, 100); 
 
      context.stroke(); } 
 
    } 
 

 
/*my JS w/c is same file with my HTML: */ 
 

 
$('#review').click(function() { 
 
     $('#shape').html($('input[name="shape_design"]:checked').val()); 
 
     $('#color').html($('input[name="color_design"]:checked').val()); 
 
     $('#show_canvas').html($('#displaycanvas').val()); 
 
    });

<!-- Here's my HTML the first template and the modal: --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/"> 
 
<canvas id="displaycanvas"></canvas> 
 
<div> <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="display()"/> O 
 
<input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="display()"/> [] </div> 
 

 
<div> <input type="radio" id="color1" name="color_design" value="RED" onchange="display()"/> RED 
 
<input type="radio" id="color2" name="color_design" value="BLUE" onchange="display()"/> BLUE </div> 
 
</form> 
 

 
<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" /> 
 

 

 
<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header">Confirm Order</div> 
 
      <div class="modal-body"> 
 
       <p> Shape: <span id="shape"></span> </p> 
 
       <p> Color: <span id="color"></span> </p> 
 
       <p> CANVAS: <span id="show_canvas"></span> </p> 
 
       </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> 
 
     </div> 
 
    </div> 
 
</div>

So wie Sie im Modal Teil unterhalb der Review-Taste, wird meine Leinwand oben nicht zeigen, sehen. Ich habe keine Ahnung, welche Art von Code ich hier erstellen muss. Vielen Dank im Voraus!

Answer 1

HTML

<!-- Here's my HTML the first template and the modal: --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/"> 
    <canvas id="displaycanvas"></canvas> 
    <div> 
     <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="display()"/> O 
     <input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="display()"/> [] 
    </div> 

    <div> 
     <input type="radio" id="color1" name="color_design" value="RED" onchange="display()"/> RED 
     <input type="radio" id="color2" name="color_design" value="BLUE" onchange="display()"/> BLUE 
    </div> 
</form> 

<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" /> 

<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header">Confirm Order</div> 
      <div class="modal-body"> 
       <p> Shape: <span id="shape"></span> </p> 
       <p> Color: <span id="color"></span> </p> 
       <p> CANVAS: <canvas id="show_canvas"></canvas> </p> 
       </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> 
     </div> 
    </div> 
</div> 

JS

$('#review').click(function() { 
    $('#shape').html($('input[name="shape_design"]:checked').val()); 
    $('#color').html($('input[name="color_design"]:checked').val()); 
    // Get the canvas and contexts 
    var canvasSource = document.getElementById('displaycanvas'); 
    var contextSource = canvasSource.getContext('2d'); 
    var canvasShow = document.getElementById('show_canvas'); 
    var contextShow = canvasShow.getContext('2d'); 
    // Read the data from the first canvas beginning at 0,0 and going to canvas.width, canvas.height 
    var image = contextSource.getImageData(0, 0, canvasSource.width, canvasSource.height); 
    // "draw" the image data onto the second canvas beginning at 0,0 
    contextShow.putImageData(image, 0, 0); 
} 

HTML5 Canvas Image Data HTML5 Canvas Put Image Data