How to create an image element dynamically using JavaScript — www.pakainfo.com

var img = document.createElement("img"); img.src = "pakainfo-welcome-demo.png"; var block = document.getElementById("result"); block.appendChild(img);

       var img = document.createElement("img"); img.src = "pakainfo-web-devlopments.png"; var div = document.getElementById("result"); div.appendChild(img); //block.setAttribute("style", "text-align:center");   

div. innerHTML += '';

Preview :

var element = $(«#html-content-holder»);

$(«#btn-Preview-Image»).on(‘click’, function() <
html2canvas(element, <
onrendered: function(canvas) <
$(«#previewImage»).append(canvas);
getCanvas = canvas;
>
>);
>);

$(«#btn-Convert-Html2Image»).on(‘click’, function() <
var imgageData =
getCanvas.toDataURL(«image/png»);

var newData = imgageData.replace(
/^data:image\/png/, «data:application/octet-stream»);

Источник

Save div as image – Html2Canvas

We will teach you how you can convert your into an image using html2canvas library.

Download html2canvas library

First, you need to download the library called Html2Canvas and paste in your project folder. You can download it from here. After that, paste the JS file in your project and include it via script tag.

Then give a unique ID to the div tag whose screenshot you wants to take. After that, create a function in Javascript which will be called when you want to take the screenshot. We will be calling that function on some button press, but you can use it as per your needs.

  Capture 

Scroll to top

In order to make this library works, your scroll position should be on header of your site. Even if you want to take the screenshot of footer or any other section in the middle. Your header must be visible before converting the div to image. So we will move the scroll to top by simply calling the window.scrollTo(x, y) function. And pass the x, y coordinates as 0 both.

Calling html2canvas function

Now we need to call the html2canvas function, it’s first parameter will be the tag which needs to be converted as image. As we already would have given it some unique ID attribute, so we can get it easily by calling document.getElementById(id) function. Lastly the library provides a function called then() which sends a callback when the div has been converted to image successfully. Basically it sends a canvas object and we can get the image data from that canvas. We can call the toDataURL(imageType, quality) function to get the image type. Possible image types are “image/jpeg” or “image/png” and the value of quality parameter ranges from 0 to 1. By setting the value to 0.9 we can get the minimum compression and maximum quality on image.

Call AJAX with base64 image

In order to save this image in our server, you need to call an AJAX request and pass this image data as parameter.

Save file on server

Now create a server file named save-capture.php and paste the following code to save the incoming data as image.

Источник

Convert html div to an image using jQuery

In this article I will show you how to convert html div to an image using JQuery. Here, I am generating HTML div element on client side to image png using html2canvas.js library. HTML5 has some excellent features; you can draw charts using canvas tag later you can save it as image png or JPEG format. HTML canvas code example:

html>
head> 
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">script> 
script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js">script>
head>
body style font-size: 9.5pt; font-family: Consolas; color: red; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">border: 1px solid #808080; width: 550px; height: 350px"> 
div id="html-content-holder" style font-size: 9.5pt; font-family: Consolas; color: red; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;"> 
strong>infinetsoft tutorialsstrong>hr /> 
h3 style font-size: 9.5pt; font-family: Consolas; color: red; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">color: #3e4b51;">convert html tocanvas 
h3> 
p style font-size: 9.5pt; font-family: Consolas; color: red; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">color: #3e4b51;">
 Lorem ipsum dolor sit amet,consectetur adipiscing elit. In scelerisque egestas leo, vel congue maurismattis in. Curabitur quis massa ut metus interdum vehicula in vel massa. Nam miquam, venenatis sit amet libero at, vehicula rutrum nisi. In at aliquam metus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos. Praesent eget quam laoreet, consequat lacus eget,condimentum neque. Aenean ut vehicula mi, et dictum quam. Integer elementumerat vel sagittis faucibus. Aliquam aliquam, ante et iaculis facilisis, nequeelit tempus neque, et lobortis urna velit porttitor nunc. In rutrum mi sit ametneque porta scelerisque. Pellentesque elementum sapien posuere arcu tinciduntornare. Nullam sed hendrerit nisl. Suspendisse at eros augue. Curabitur tempora lacus nec cursus. 
p> 
div> 
a id="btn-Convert-Html2Image" href="#">convertto imagea> 
script>
 $(document).ready(function ()  
var element = $("#html-content-holder"); // global variable 
var getCanvas; //global variable
 html2canvas(element, 
 onrendered: function (canvas) 
 getCanvas = canvas;
 >
 >); 

 $("#btn-Convert-Html2Image").on('click', function ()  
var imgageData = getCanvas.toDataURL("image/png"); 
//Now browser starts downloading it instead of just showing it 
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
 $("#btn-Convert-Html2Image").attr("download", "your_image.png").attr("href", newData);
 >);
 >); 
script>
body>
html> 

Description: To begin, download latest jQuery library and import into the web page, we need one more js library Html2canvas.js, for both me referred cdn, when the user click the convert to image button, the div element get a picture printed on canvas and then downloaded to the local drive as picture using client-side jQuery. Output: image on canvas HTML5 Video tutorial:

Related Article

Источник