Главная » Языки программирования

Convert Div to image

Содержание
  1. Desire Code
  2. Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming
  3. Tuesday, 1 November 2016
  4. Capture div into image using html2canvas in php
  5. Save the image and show to user
  6. PHP: HTML/CSS to Image
  7. Authentication with PHP
  8. PHP example code
  9. PHP example with Guzzle library
  10. Debugging Error:SSL certificate problem: unable to get local issuer certificate
  11. Need help?
  12. PHP: HTML/CSS to Image
  13. Authentication with PHP
  14. PHP example code
  15. PHP example with Guzzle library
  16. Debugging Error:SSL certificate problem: unable to get local issuer certificate
  17. Need help?
  18. Convert (div) Html to Image using Javascript html2canvas with Example and Save using Ajax, PHP.
  19. Developergang.com
  20. Full Code
  21. Developergang.com
  22. save_image.php
  23. php — Convert HTML Div content to Image
  24. Answer
  25. Solution:
  26. Share solution ↓
  27. Additional Information:
  28. Didn’t find the answer?
  29. Similar questions
  30. Write quick answer
  31. About the technologies asked in this question
  32. PHP
  33. JQuery
  34. CSS
  35. HTML
  36. Welcome to programmierfrage.com
  37. Get answers to specific questions
  38. Help Others Solve Their Issues

Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Tuesday, 1 November 2016

Capture div into image using html2canvas in php

In this example, this scripts will allow you to take screenshot of the div directly on the user browser.

In div, what you write content in this tag it will be convert in the image and can save image of div as a screenshot. If you put image in div tag, then we can also take screenshot of image what we mention between div tag.

Читайте также:  Питон классы метод init

So, How it is possible programmatically ? Let’s see the example :-

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
 type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  type="text/javascript" src="js/html2canvas.js">  type="text/javascript" src="js/jquery.plugin.html2canvas.js"> html2canvas With JavaScript and PHP   method="POST" enctype="multipart/form-data" action="save.php" id="form1">  type="hidden" name="img_value" id="img_value" value="" />    valign="top" style="padding: 10px;"> Div:   id="target" style="border: 1px solid #CCC;padding: 5px;margin: 5px;">  PHP is a server-side scripting language designed primarily for web development but is also used as a general-purpose programming language.       colspan="2">  width="100%">   type="submit" value="Screenshot" onclick="capture();" />        type="text/javascript"> function capture()  $('#target').html2canvas( onrendered: function (canvas)  //Set hidden field's value to image data $('#img_value').val(canvas.toDataURL("image/png")); //Submit the form1 document.getElementById("form1").submit(); > >); >  
 $filterData=substr($_POST['img_value'], strpos($_POST['img_value'], ",")+1); //Get the base-64 string from data $decodeData=base64_decode($filterData); //Decode the string file_put_contents('screenshot.png', $decodeData); //Save the image ?> 
Save the image and show to user
  echo '.$_POST['img_value'].'" />'; ?>

  • If you want to put image in div , then just change this code in index,php file. See this code and change it.
 id="target" style="border: 1px solid #CCC;padding: 5px;margin: 5px;">  PHP is a server-side scripting language designed primarily for web development but is also used as a general-purpose programming language.    
 id="target" style="border: 1px solid #CCC;padding: 5px;margin: 5px;">  src = "a.png"/> //image which is available in the main folder where code file is available

Источник

PHP: HTML/CSS to Image

For more details on how this works, see Creating an image.

Example API response:

Image generated with PHP. Convert HTML to an image using PHP.

Authentication with PHP

Your username is your User ID and your password is your API Key. Both of these are available from the dashboard. The PHP code sample demonstrates how to authenticate your request.

You can signup for a free API key to get started.

PHP example code

This PHP code example sends an HTTP POST to the https://hcti.io/v1/image API. Converting your HTML/CSS to an image with PHP.

 Generated from PHP ✅
EOD; $css = EOD; $google_fonts = "Roboto"; $data = array('html'=>$html, 'css'=>$css, 'google_fonts'=>$google_fonts); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "https://hcti.io/v1/image"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); curl_setopt($ch, CURLOPT_POST, 1); // Retrieve your user_id and api_key from https://htmlcsstoimage.com/dashboard curl_setopt($ch, CURLOPT_USERPWD, "user_id" . ":" . "api_key"); $headers = array(); $headers[] = "Content-Type: application/x-www-form-urlencoded"; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $result = curl_exec($ch); if (curl_errno($ch)) < echo 'Error:' . curl_error($ch); >curl_close ($ch); $res = json_decode($result,true); echo $res['url']; // https://hcti.io/v1/image/202dc04d-5efc-482e-8f92-bb51612c84cf ?>

PHP example with Guzzle library

Using an HTTP library such as Guzzle can simplify your code even further. Here’s an example of how to use the HTML/CSS to Image API with Guzzle.

Installation instructions for Guzzle are here.

Pong ✅
"; $css = ".ping < padding: 20px; font-family: 'sans-serif'; >"; $client = new GuzzleHttpClient(); // Retrieve your user_id and api_key from https://htmlcsstoimage.com/dashboard $res = $client->request('POST', 'https://hcti.io/v1/image', [ 'auth' => ['user_id', 'api_key'], 'form_params' => ['html' => $html, 'css' => $css] ]); echo $res->getBody(); // ?>

The code turns out to be a bit more readable and less complex when using Guzzle. A great option if you’re open to adding the library to your project.

Debugging Error:SSL certificate problem: unable to get local issuer certificate

When running this script on a Windows machine, it’s possible you’ll get an SSL error. The fix for this is here.

Need help?

We’re always looking to improve this documentation. Please send us an email: support@htmlcsstoimage.com. We respond fast.

Built with extensive integration tests and serious care for developer happiness.
© 2018-2023 Code Happy, LLC.

Page last modified: Jul 4 2023 at 03:43 PM .

Источник

PHP: HTML/CSS to Image

For more details on how this works, see Creating an image.

Example API response:

Image generated with PHP. Convert HTML to an image using PHP.

Authentication with PHP

Your username is your User ID and your password is your API Key. Both of these are available from the dashboard. The PHP code sample demonstrates how to authenticate your request.

You can signup for a free API key to get started.

PHP example code

This PHP code example sends an HTTP POST to the https://hcti.io/v1/image API. Converting your HTML/CSS to an image with PHP.

 Generated from PHP ✅
EOD; $css = EOD; $google_fonts = "Roboto"; $data = array('html'=>$html, 'css'=>$css, 'google_fonts'=>$google_fonts); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "https://hcti.io/v1/image"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); curl_setopt($ch, CURLOPT_POST, 1); // Retrieve your user_id and api_key from https://htmlcsstoimage.com/dashboard curl_setopt($ch, CURLOPT_USERPWD, "user_id" . ":" . "api_key"); $headers = array(); $headers[] = "Content-Type: application/x-www-form-urlencoded"; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $result = curl_exec($ch); if (curl_errno($ch)) < echo 'Error:' . curl_error($ch); >curl_close ($ch); $res = json_decode($result,true); echo $res['url']; // https://hcti.io/v1/image/202dc04d-5efc-482e-8f92-bb51612c84cf ?>

PHP example with Guzzle library

Using an HTTP library such as Guzzle can simplify your code even further. Here’s an example of how to use the HTML/CSS to Image API with Guzzle.

Installation instructions for Guzzle are here.

Pong ✅
"; $css = ".ping < padding: 20px; font-family: 'sans-serif'; >"; $client = new GuzzleHttpClient(); // Retrieve your user_id and api_key from https://htmlcsstoimage.com/dashboard $res = $client->request('POST', 'https://hcti.io/v1/image', [ 'auth' => ['user_id', 'api_key'], 'form_params' => ['html' => $html, 'css' => $css] ]); echo $res->getBody(); // ?>

The code turns out to be a bit more readable and less complex when using Guzzle. A great option if you’re open to adding the library to your project.

Debugging Error:SSL certificate problem: unable to get local issuer certificate

When running this script on a Windows machine, it’s possible you’ll get an SSL error. The fix for this is here.

Need help?

We’re always looking to improve this documentation. Please send us an email: support@htmlcsstoimage.com. We respond fast.

Built with extensive integration tests and serious care for developer happiness.
© 2018-2023 Code Happy, LLC.

Page last modified: Jul 4 2023 at 03:43 PM .

Источник

Convert (div) Html to Image using Javascript html2canvas with Example and Save using Ajax, PHP.

convert html to image javascript (html2canvas example)

Sometimes you need to convert your entire div to the image. In this post, I am going to Convert the div or HTML to image with using jquery, javascript html2canvas with an example. and you can copy the code and apply to your website. This code is tested by my self as a developer having 5 years of experience in the same field. If you have the knowledge of jQuery, PHP coding then it will be more easy to convert HTML to image using javascript html2canvas and saving using Ajax, PHP. Here i am going to use https://html2canvas.hertzen.com/ 1.For example i have HTML like below:

Developergang.com

Welcome to Developergang.com

$imagedata = base64_decode($_POST['imgdata']); $filename = md5(uniqid(rand(), true)); //path where you want to upload image $file = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'.$filename.'.png'; $imageurl = 'http://example.com/uploads/'.$filename.'.png'; file_put_contents($file,$imagedata); echo $imageurl;

Full Code

Developergang.com

Welcome to Developergang.com

save_image.php

$imagedata = base64_decode($_POST['imgdata']); $filename = md5(uniqid(rand(), true)); //path where you want to upload image $file = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'.$filename.'.png'; $imageurl = 'http://example.com/uploads/'.$filename.'.png'; file_put_contents($file,$imagedata); echo $imageurl;

Hope that helps to understand html2canvas and Convert html to image javascript. If you still have queries, we will happy to help. Do comment below. Also if you want to Submit your post with the answer (Solution) or Submit Blog Post. You can visit submit blog post page.

Источник

php — Convert HTML Div content to Image

I am trying to make an image editor kind of page. Person can add text and styles to the background image. Everything i have done through HTML, Jquery and css, but struck up with export it to an image. I want to convert the particular div into image.

Note: I already know HTML to image conversion is possible through SVG and HTML5 Canvas. I cannot do those things because of browser compatibility.

If any PHP classes or jquery plugin is available please help me.

Answer

Solution:

I think it is not possible without HTML5 features on the client side directly. May be I wrong?

My solution is to send the entire div (with styles) to backend server, where capture a screenshot with PhantomJS or Qt Webkit. On the server side you shoold open the DIV user created as it displayed in user browser and then make screenshot of this DIV.

Share solution ↓

Additional Information:

Didn’t find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Similar questions

Find the answer in similar questions on our website.

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

About the technologies asked in this question

PHP

PHP (from the English Hypertext Preprocessor — hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites. The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/

JQuery

JQuery is arguably the most popular JavaScript library with so many features for modern development. JQuery is a fast and concise JavaScript library created by John Resig in 2006. It is a cross-platform JavaScript library designed to simplify client-side HTML scripting. Over 19 million websites are currently using jQuery! Companies like WordPress, Facebook, Google, IBM and many more rely on jQuery to provide a kind of web browsing experience.
https://jquery.com/

CSS

CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language. It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css

HTML

HTML (English «hyper text markup language» — hypertext markup language) is a special markup language that is used to create sites on the Internet. Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/

Welcome to programmierfrage.com

programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.

Get answers to specific questions

Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.

Help Others Solve Their Issues

Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.

Источник

Оцените статью