ユーザーの選択に基づいてモーダルでキャンバスイメージを表示

Question

キャンバスでユーザーが選択するたびに、キャンバスに描画とカラー表示を行う作業テンプレート（モーダルではない）が既にあります。私が必要としたのは、ユーザーがデータベースに提出する前に、要約フォーム（すでに作業中）とキャンバス画像（私の問題）を表示するモーダルが欲しいということです。それは、最初のテンプレートから見えるものからイメージをコピーするようなものです。キャンバスの表示、別のファイルの

私のJS：

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>

あなたがレビューボタン下のモーダル一部で見ることができるように、私のキャンバスが表示されません。私はここでどのような種類のコードを作る必要があるのか​​分かりません。あまり前もってありがとう！

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