Jan 19, 2018
0
Level 1
Pass Value from JS Function to Blade View Form
I need to capture a screenshot from an HTML element and then upload that screenshot as an image file. I am using html2canvas to create a JavaScript function that will download the image with an onClick function. The capture screenshot function works to download "onClick".
I need to pass the value of that function to the blade form (laravaelcollective/html).
//Blade form:
{!! Form::open(['method'=>'POST', 'action' => 'AdminFloorsController@store', 'files'=>true]) !!}
<div class="form-group">
{!! Form::hidden('photo_id', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::submit('Create Property', ['onClick' => 'takeScreenShot()', 'class' => 'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
//JavaScript function
<script type="text/javascript">
window.takeScreenShot = function() {
html2canvas(document.getElementById("screenshot"), {
onrendered: function(canvas) {
var screenshot = canvas.toDataURL("image/png");
download(screenshot, "image_captured", "image/png");
},
});
}
</script>
Please or to participate in this conversation.