将 JavaScript 函数（html2canvas）的值传递给 Laravel Blade 表单答案

【问题标题】：Pass Value of JavaScript Function(html2canvas) to Laravel Blade Form将 JavaScript 函数（html2canvas）的值传递给 Laravel Blade 表单
【发布时间】：2018-06-29 09:20:19
【问题描述】：

我需要从 HTML 元素中捕获屏幕截图，然后将该屏幕截图作为图像文件上传。我可以使用html2canvas 捕获 html 元素的屏幕截图。我一直无法弄清楚如何将值从 onClick 函数传递到 Laravel Blade Form。

Laravel 中的所有其他内容都已正确设置（模型、控制器、迁移等），因为我还有其他将图像文件保存到数据库的表单。

Laravel 刀片视图：

<div id="screenshot>
    <h1>capture this text</h1>
</div>
{!! Form::open(['method'=>'POST', 'action' => 'PhotosController@store', 'files'=>true]) !!}

    <div class="form-group">
        // TODO: this input will receive the value from the JS function
        {!! 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 (html2canvas)

<script type="text/javascript">
    window.takeScreenShot = function() {

    html2canvas(document.getElementById("screenshot"), {
        onrendered: function(canvas) {

            // TODO: pass this variable to the form
            var screenshot = canvas.toDataURL("image/png");

            //download(screenshot, "image_captured", "image/png");
        },
    });
    }
</script>

【问题讨论】：

document.getElementById('photo_id').value = screenshot 之类的东西应该得到分配给表单中隐藏输入的变量。将其放在var screenshot = ... 之后。或者将该行替换为document.getElementById('photo_id').value = canvas.toDataURL("image/png");
您可以为此使用 ajax。在 screenshot 变量中，您将获取屏幕截图的 dataurl，您可以使用 ajax 将其发布到服务器并保存在服务器上

标签： javascript php laravel

【解决方案1】：

你可以这样使用：

$(document).ready(function(){

var element = $('.content-wrapper');

$('#saveReport').on('click', function(){
    html2canvas(element, {
        background: '#ffffff',
        onrendered: function(canvas){
            var imgData = canvas.toDataURL('image/jpeg');
            $.ajax({
                url: 'route-url',
                type: 'post',
                dataType: 'text',
                data: {
                    base64data: imgData
                }
            });
            alert('Success!');
            console.log(imgData);
        }
    });
});

【讨论】：