如何在图像中转换视图文件并在laravel中返回api [英] how to convert view file in image and return in api in laravel

查看:82
本文介绍了如何在图像中转换视图文件并在laravel中返回api的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在laravel中创建一个API。其中,我必须将刀片文件转换为图像,并应在api中返回转换后的图像或base64的路径。

I am creating an API in laravel. In which, I have to convert blade file into image and should return path of converted image or base64 in api.

我正在使用html2canvas。

I am using html2canvas.

路线是:

 $router->POST('savecard', 'HomeController@SaveCard');
 $router->get('save-capture/{image_for_save}', 'HomeController@savecapture');

我必须通过 POSTMAN 呼叫保存卡并运行一些代码,然后我有一个刀片文件template1.blade.php

I have to call savecard by POSTMAN and run some code and then I have a blade file template1.blade.php

我的控制器是:

public function SaveCard(Request $request)
{
$find_edittemplate_id = edittemplate::select('id')->where('user_id','=',$request->user_id)->first();
return view('template1');
}

    public function savecapture($image_for_save)
{
    $image = $image_for_save;
    $image = explode(";", $image)[1];

    // Remove base64 from left side of image data
    // and get the remaining part
    $image = explode(",", $image)[1];

    // Replace all spaces with plus sign (helpful for larger images)
    $image = str_replace(" ", "+", $image);

    // Convert back from base64
    $image = base64_decode($image);
    $destinationPath = storage_path('uploads/');

    file_put_contents($destinationPath,'temp.png',$image);

    return response()->json(['CardSave' => $image, 'message' => 'Success'], 201);
   } 

查看template1文件后,我创建了ajax调用,将图像转换为template1.blade .php。

After view template1 file, I created ajax call for convert image to template1.blade.php.

savecapture()将由ajax在template1.blade.php上运行

savecapture() will run on template1.blade.php by ajax

视图为:

<!DOCTYPE html>
<html>
<head>
    <title>Template One</title>
    <link href="{{ url('css/style1.css') }}" rel="stylesheet" />
    <link href="{{ url('css/font-awesome.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link href="../css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="row" id="mydiv_screenshot">
   <div class="col-md-12 col-sm-12">
     <!-- Logo_Section -->
     <div class="row text-center backgroundf0f0f0 pd20">
     <div class="logo col-md-6 col-sm-8 col-sm-offset-2 col-md-offset-3">
     <img src="{{ url('images/logo.png') }}" alt="Logo" width="100%" height="auto" max-height="130px"/>
     </div>
     <div class="col-md-12 col-sm-12 businessheadlineblack pdt5">
     <h3>Digital Business Card</h3>
     </div>
     </div>
    </div>
 </div>
    </body>
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
 crossorigin="anonymous"></script>
</html>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script>
    $(document).ready(function() {
    window.scrollTo(0, 0);        
  html2canvas(document.getElementById("mydiv_screenshot")).then(function (canvas) {
 var ajax = new XMLHttpRequest();
 var image_data = canvas.toDataURL("image/jpeg", 0.9);
   $.ajax({
                url: '{{ url("save-capture") }}',
                type: 'GET',
                data: {"image_for_save": image_data},
                success: function(response){
                    if(response != 0){
                        //console.log(response);
                    }else{
                        //console.log(response);
                    }
                }, 
                async: true
                });
            });
        });
    </script>

但是它在邮递员中显示完整的刀片文件,并且不运行ajax。

But It show in postman complete blade file and also not run ajax.

推荐答案


我必须将刀片文件转换为图像

I have to convert blade file into image

刀片文件由服务器上的Laravel处理。没有直接的方法可以将它们转换为图像。

Blade files are processed by Laravel on server. There is no direct way to convert them in images.


我在核心php中使用了htmlcanvas。但是我对laravel一无所知。

I have used htmlcanvas in core php. But I have no idea in laravel.

PHP没有此功能。 HtmlCanvas是浏览器DOM的一部分。除非您使用了一些自定义的PHP扩展,否则我想您要做的就是在浏览器中使用javascript / canvas创建图像,然后将其发送到服务器(这也是Laravel的方法)。

PHP doesn't have this functionality. HtmlCanvas is part of browser DOM. Unless you've used some custom PHP extension, what I think you did was creating the image on browser using javascript/canvas and then send it to the server (which is exactly the way to go with Laravel as well).

这篇关于如何在图像中转换视图文件并在laravel中返回api的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆