javascript - Convert html block to image in laravel - Stack Overflow

admin管理员组

文章数量:1316588

I am creating a html code by sending an ajax request.

Ajax script

$.ajax({
    url: "{{url('/')}}/phpScript", //Server script to process data
    type: 'POST',
    dataType: 'json',
    data: data, //this is an object with all my required variables
    success: function (html) {
        if (html) {
            $('#someTag').html(html); //change the html of #someTag with new html   
        }
    }

});

PHP Script:

static function createHtml() {
    ob_start(); ?>
        <div class="large-12 medium-12 columns" id="certificate-holder">
            <div class="middle-wrappe">
               <?php //some other code here to create the html ?>
            </div>
            <style>/** some style here**/</style>
        </div>


    <?php return ob_get_clean();
}

This is working fine and I am able to create html and change the html with new html.

Is there any way to create the image of that html block, so that I can return the image back and show the image in that #someTag instead of the html.

I have used anam/phantommagick to create image from html, but in this I need to pass the url of page to create image.

Thanks

I am creating a html code by sending an ajax request.

Ajax script

$.ajax({
    url: "{{url('/')}}/phpScript", //Server script to process data
    type: 'POST',
    dataType: 'json',
    data: data, //this is an object with all my required variables
    success: function (html) {
        if (html) {
            $('#someTag').html(html); //change the html of #someTag with new html   
        }
    }

});

PHP Script:

static function createHtml() {
    ob_start(); ?>
        <div class="large-12 medium-12 columns" id="certificate-holder">
            <div class="middle-wrappe">
               <?php //some other code here to create the html ?>
            </div>
            <style>/** some style here**/</style>
        </div>


    <?php return ob_get_clean();
}

This is working fine and I am able to create html and change the html with new html.

Is there any way to create the image of that html block, so that I can return the image back and show the image in that #someTag instead of the html.

I have used anam/phantommagick to create image from html, but in this I need to pass the url of page to create image.

Thanks

• javascript
• php
• image
• laravel-4

Share Improve this question Follow edited Mar 25, 2020 at 15:20 user3601546 31811 gold badge66 silver badges1515 bronze badges asked Nov 23, 2015 at 8:22 Anshul MishraAnshul Mishra 1,71622 gold badges1616 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I use following technique

https://jsfiddle/8ypxW/3/

Jquery Code:

$(function() { 
     $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
    });
});

});

Its works for me. I hope you find your solution.

There are two ways two generate image from HTML block are:-

1.Using Jquery:-

html2canvas(document.getElementById('frame')).then(function(canvas) {
       // to view the generated image on the same page
        document.body.appendChild(canvas);

        // to save the image as png file
        Canvas2Image.saveAsPNG(canvas);

        // Get base64URL
    canvas.toDataURL('image/jpeg').replace('image/jpeg','image/octet-stream');
});

https://cdnjs.cloudflare./ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js

2. Using spatie/browsershot package:-

This package can be installed through Composer.

poser require spatie/browsershot

In all examples it is assumed that you imported this namespace at the top of your file

use Spatie\Browsershot\Browsershot;

Here's the easiest way to create an image of a webpage:

Browsershot::url('https://example.')->save($pathToImage);

By default the screenshot's type will be a png. (According to Puppeteer's Config) But you can change it to jpeg with quality option.

Browsershot::url('https://example.')
    ->setScreenshotType('jpeg', 100)
    ->save($pathToImage);

By default the screenshot's size will match the resolution you use for your desktop. Want another size of screenshot? No problem!

Browsershot::url('https://example.')
    ->windowSize(640, 480)
    ->save($pathToImage);

You can take a screenshot of an element matching a selector using select.

Browsershot::url('https://example.')
    ->select('.some-selector')
    ->save($pathToImage);

You can take a screenshot of the full length of the page by using fullPage().

Browsershot::url('https://example.')
    ->fullPage()
    ->save($pathToImage);

For more options you can use the official documentation:- https://github./spatie/browsershot

本文标签： javascriptConvert html block to image in laravelStack Overflow