Another way to create map image #62
Comments
|
I have no experience with html2canvas. Try using this library via the JS console after the My Mind app is fully loaded to see whether it can make a screenshot or not. |
|
My code as follows,the "onrendered" callback function can not jump in.There is no log output,maybe it because "my-mind.js" disabled related events? function saveHtml2Image(divId, scale) {
var obj = $("#" + divId);
var width = obj.width();
var height = obj.height();
html2canvas(obj, {
width: width,
height: height,
background: "rgba(255,255,255,1)",
logging: true,
onrendered: function (canvas) {
var dataUrl = Canvas2Image.saveAsJPEG(canvas, parseInt(width * scale), parseInt(height * scale));
var totalSize = dataUrl.length / 1024 / 1024;
if (totalSize > 1.3) {
dataUrl = null;
scale = scale - 0.1;
saveHtml2Image(divId, scale);
}
else {
$('#downloadImage').attr('href', dataUrl);
$('#downloadImage').attr('download', 'test.jpg');
$('#downloadImage')[0].click();
}
}
});
} |
|
It would be great if you could publish your sample page (i.e. the My Mind installation with this script inside) somewhere. This snippet does not offer enough information. From where is this function called, with what argument values? Etc... |
|
Code of the simple html page as follows: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html2image</title>
<script src="../js/jquery.min1.8.js"></script>
<script src="../js/html2canvas.js"></script>
<script src="../js/canvas2image.js"></script>
<script>
$(document).ready(function () {
$("#saveAsImage").click(function (e) {
saveHtml2Image("div1", 3);
});
});
function saveHtml2Image(objId, scale) {
document.body.scrollTop = 0;
var obj = $("#" + objId);
var width = obj.width();
var height = obj.height();
html2canvas(obj, {
width: width,
height: height,
background: "rgba(255,255,255,1)",
onrendered: function (canvas) {
var dataUrl = Canvas2Image.saveAsJPEG(canvas, parseInt(width * scale), parseInt(height * scale));
var totalSize = dataUrl.length / 1024 / 1024;
if (totalSize > 1.3) {
dataUrl = null;
scale = scale - 0.1;
saveHtml2Image(objId, scale);
}
else {
$('#downloadImage').attr('href', dataUrl);
//$('#downloadImage').attr('href', canvas.toDataURL());
$('#downloadImage').attr('download', 'test.jpg');
$('#downloadImage')[0].click();
}
}
});
}
</script>
</head>
<body>
<div id="div1" style="color:red;padding:10px 10px;">
<div>
<span>
hello,my english name is is leation.
</span>
</div>
<div>
<img style="width:500px;float:left;" src="../img/01.jpg" />
<img style="width:500px;float:left;" src="../img/01.jpg" />
</div>
<div style="clear:both;"></div>
<div>
<span>
hello,my english name is is leation.
</span>
</div>
<div style="clear:both;"></div>
</div>
<div style="position:fixed;bottom:30px;right:30px;">
<input type="button" value="saveHtmlAsImage" id="saveAsImage" />
<a href="" id="downloadImage" style="display:none;">downloadImage</a>
</div>
</body>
</html> |
|
"html2canvas.js" and "canvas2image.js" . |
|
I had solve this problem.The reason is the "Promise".I renamed the "Promise" to "PromisePlus" in whole content of "my-mind.js" file. |
|
It's a good ideal to use html2canvas.js, |
|
Exporting images should work once again! See #134 for more info. |
I have a idea to save map as image file by another way.First,convert html to canvas by html2canvas
javascript api,then save canvas to image by canvas2image javascript api.When I try this method in a
simple html page,everything is ok,but when I use this method in the “index.html” page which is under
“my-mind-master" folder,It can't work properly.After trying,I have found that if I remove "my-mind.js" in
my web page,every thing is ok,conversely,It can't work properly.
Sincerely hope that you can help me to solve this question.
The text was updated successfully, but these errors were encountered: