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
Share Improve this question edited Mar 25, 2020 at 15:20 user3601546 3181 gold badge6 silver badges15 bronze badges asked Nov 23, 2015 at 8:22 Anshul MishraAnshul Mishra 1,7162 gold badges16 silver badges40 bronze badges2 Answers
Reset to default 3I 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