mikestratton's avatar

Store a Captured Screenshot as an Image File

I need to be able to take screenshot of an HTML element and upload as an image.

I have created a model, view and controller that allows me to add a file upload to any form. I also can take a screenshot of an HTML element using html2canvas.

What I cannot do is make it so that my captured screenshot becomes an uploaded image.

https://laracasts.com/discuss/channels/javascript/pass-value-from-js-function-to-blade-view-form

0 likes
3 replies
bipin's avatar

@mikestratton have you done this thing

  in controller
        use file;

and in view

  use this enctype="multipart/form-data"?

& define you screen shot location

mikestratton's avatar
//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>
mikestratton's avatar

@bipin Yes, I have done this in controller. The problem is not passing a file, the problem is passing what is processed in the function, to the view so it can be processed in the controller once the form is submitted.

var screenshot = canvas.toDataURL("image/png");

Please or to participate in this conversation.