I have a big problem,
please help me !
This is my code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>
<script type="text/javascript">
$(function() {
$("#show_button").click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
$("<img/>", {
id: "image",
src: canvas.toDataURL("image/png"),
width: '95%',
height: '95%'
}).appendTo($("#show_img").empty());
}
});
});
});
</script>
</head>
<body>
<h1>test</h1>
<button id="show_button">Show Image</button>
//this is a problem
download
<div id="show_img"></div>
</body>
</html>
If my viewpoint is correct .
To save image,the download need the correct file path and file name.
And i use the html2canvas.js , convert the target into image .
But when i want to save the image , i don't know the correct file path and file name.(Because the image is dynamic file ,not a static file?)
How can i get the correct value to save this image?
Thank you!
OK, I've discovered canvas2image.js that does what you need with this function
downloadPNG = function () {
html2canvas(document.body, {
onrendered: function (canvas) {
Canvas2Image.saveAsPNG(canvas);
}
});
}
Here is a fiddle
http://jsfiddle.net/link2twenty/w8Lk3znf/
Use html2canvas it will convert html to canvas and use canvas2image packages to convert canvas to image (or) you can pass canvas data .toDataURL("image/png");
example:
var imagename = '<YOUR_IMAGE_NAME>';
var link = event.target;
var canvasData = '<YOUR_CANVAS_DATA>'.toDataURL("image/png");
downloadImageFormat(link, canvasData, imagename);
function downloadImageFormat(link, canvasData, imagename) {
link.href = canvasData;
link.download = imagename;
}
Here is fiddle demo
Just Use html2canvas library just include plugin and call method to convert HTML to Canvas then download as image PNG
html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
var link = document.createElement("a");
document.body.appendChild(link);
link.download = "manpower_efficiency.jpg";
link.href = canvas.toDataURL();
link.target = '_blank';
link.click();
});
Source: http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
Related
I have 2 questions, i am working on a javascript script where i have the following code
<script type="text/javascript" >
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imageId').attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
setTimeout(initCropper, 1000);
}
}
function initCropper(){
var image = document.getElementById('blah');
var cropper = new Cropper(image, {
aspectRatio: 1 / 1,
crop: function(e) {
console.log(e.detail.x);
console.log(e.detail.y);
}
});
// On crop button clicked
document.getElementById('crop_button').addEventListener('click', function(){
var imgurl = cropper.getCroppedCanvas().toDataURL();
var img = document.createElement("img");
img.src = imgurl;
document.getElementById("cropped_result").appendChild(img);
//sending cropped image to server
cropper.getCroppedCanvas().toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob);
// Use `jQuery.ajax` method
path = 'C:/Users/Andy/Desktop/javascript/croppingwcropperjs/uploads';
$.ajax(path, {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function () {
console.log('Upload error');
}
});
});
})
}
</script>
here is the html part of it
<! DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script name="jquery-croper-script">
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r(e.jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c.fn){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u=void 0;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css" />
</head>
<body>
<input type="file" name="image" id="image" onchange="readURL(this);"/>
<div class="image_container">
<img id="imageId" src="#" alt="your image" />
</div>
<div id="cropped_result"></div>
<button id="crop_button">Crop</button>
</body>
</html>
Okay. with the code above i intent to crop an image and save the cropped version in my a folder named uploads. I have managed to crop the image however i couldnt save the cropped image. My question are :
what should be the path format in order to successfully commit the cropped image into an upload folder?
i have seen some creating a php script for path like uploads.php is it mandatory for the path to be a script in php.
I am taking a screenshot of a div in php using html2canvas. Script
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script>
function genScreenshot() {
html2canvas(document.getElementById('screen1'), {
onrendered: function(canvas) {
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').val(canvas.toDataURL("image/png"));
document.getElementById("screenshot").submit();
}
}
});
}
</script>
it is working fine with desktop
With mobile it takes screenshot worngly
Help me to sort out the issue
I want to save the screenshot to server when click on div on page. It's a few problems. I'm rookie. Please help.
1)The picture is being saved but also shown at the bottom of the page. just want to be saved.
2)This is the most important. page contains iframe and image files. my main goal is to take images of them. but I was not successful. please help.
my html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="mydiv">
here is iframe
</div>
<div>
bla bla bla
image
</div>
<script type="text/javascript" src="html2canvas.js"></script>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var mydiv = document.getElementById('mydiv');
mydiv.style.cursor = 'pointer';
mydiv.onclick = function () {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {image: base64URL},
success: function(data){
console.log('Upload successfully');
}
});
});
};
mydiv.onmouseover = function() {
this.style.backgroundColor = 'white';
};
mydiv.onmouseout = function() {
this.style.backgroundColor = '';
};
</script>
</body>
</html>
please edit the code for me. how it works the way I want.
ajaxfile.php I have no problem with this
<?php
$image = $_POST['image'];
$location = "upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;
file_put_contents($file, $image_base64);
So I am trying to use the SheetJS javascript to read in some excel files. I download the SheetJS and I have copied the xlsx.full.min.js in same directory as my html file. However, I do not get it to work. So I tried the code below. The problem is that it does not reach the alert('finished reading'); line. So I do not know if there was a problem reading the source file or what the problem exactly is. I hope somebody can help me with this! Thanks!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
</style>
</head>
<body>
<p><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file</p>
<script src="xlsx.full.min.js"></script>
<script>
function handleFile(e) {
//Get the files from Upload control
var files = e.target.files;
var i, f;
//Loop through files
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function (e) {
var data = e.target.result;
alert(data);
var result;
alert('reading now');
var workbook = XLSX.read(data, { type: 'binary' });
alert('finished reading');
var sheet_name_list = workbook.SheetNames;
sheet_name_list.forEach(function (y) { /* iterate through sheets */
//Convert the cell value to Json
var roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
if (roa.length > 0) {
result = roa;
}
});
//Get the first column first cell value
alert(result[0].Column1);
};
reader.readAsArrayBuffer(f);
}
}
var xlf = document.getElementById('xlf');
if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);
</script>
</body>
</html>
I just want to export a webpage loaded inside an iFrame. But I want to have action from an outer iFrame.
Here's my code to clarify things:
<html>
<body>
some contents here....
<div id="main">
<iframe id="myiframe" src="template/index.html"></iframe>
</div>
Export
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
function downloadInnerHtml(filename, elId, mimeType) {
var elHtml = document.getElementById(elId).innerHTML;
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click();
}
var fileName = 'newlstter.html';
$('#downloadLink').click(function(){
downloadInnerHtml(fileName, 'main','text/html');
});
});
</script>
</body>
</html>
When I click the export button the HTML file is exported and it will include the iFrame. But if I use these codes inside the inner HTML file it will export.
But I need to export that current HTML page from the outter site. Exactly like my code above. But I just want to export only the inner HTML.
Can any one give me some suggestion for this?
Note: Please I need jQuery or JS code, not PHP.
Thanks!
I suggest using an AJAX; the following fiddle returns just the HTML that you need: https://jsfiddle.net/yLL48one/2/
$.get( "/yLL48one/1/", function( data ) {
console.log( data );
});