我已经有了一个工作模板(非模态),每次用户选择时,画布和颜色都会显示在画布上。现在我需要的是,在用户将其提交到我的数据库之前,我想要一个显示摘要表单(已经工作)和画布图像(我的问题)的模式。就像我只是从第一个模板中复制图像一样。
我的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>
&#13;
因此,您可以在Review Button下方的模态部分看到,我的画布不会显示出来。我不知道我需要在这里构建什么样的代码。非常感谢你!
答案 0 :(得分: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);
}