convert canvas to png image

This commit is contained in:
alexadam 2016-09-09 19:31:37 +03:00
parent c752f7a3b6
commit 586173d87f
2 changed files with 61 additions and 11 deletions

View file

@ -42,16 +42,6 @@ function getImageSrc(srcTxt) {
return '../images/' + newImgFileName;
}
function generateRandomTag() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for(var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
function formatPreCodeElements($jQueryElement) {
$jQueryElement.find('pre').each(function (i, pre) {
$(pre).replaceWith('<pre>' + pre.innerText + '</pre>');
@ -67,9 +57,20 @@ function extractMathMl($htmlObject) {
});
}
function extractCanvasToImg($htmlObject) {
$htmlObject.find('canvas').each(function (index, elem) {
var tmpXP = getXPath(elem);
tmpXP = tmpXP.replace(/^\/div\[1\]/m, '/html[1]/body[1]');
var docEl = lookupElementByXPath(tmpXP);
var jpegUrl = docEl.toDataURL('image/png');
$(elem).replaceWith('<img src="' + jpegUrl + '" alt=""></img>');
});
}
function preProcess($htmlObject) {
extractMathMl($htmlObject);
$htmlObject.find('script, style, svg, canvas, noscript, iframe').remove();
extractCanvasToImg($htmlObject);
$htmlObject.find('script, style, svg, noscript, iframe').remove();
$htmlObject.find('*:empty').not('img').remove();
formatPreCodeElements($htmlObject);
}

View file

@ -175,3 +175,52 @@ function getBase64ImgData(srcTxt) {
return '';
}
}
function getXPath(elm) {
var allNodes = document.getElementsByTagName('*');
for (var segs = []; elm && elm.nodeType === 1; elm = elm.parentNode) {
if (elm.hasAttribute('id')) {
var uniqueIdCount = 0;
for (var n = 0; n < allNodes.length; n++) {
if (allNodes[n].hasAttribute('id') && allNodes[n].id === elm.id) {
uniqueIdCount++;
}
if (uniqueIdCount > 1) {
break;
}
}
if (uniqueIdCount === 1) {
segs.unshift('id("' + elm.getAttribute('id') + '")');
return segs.join('/');
} else {
segs.unshift(elm.localName.toLowerCase() + '[@id="' + elm.getAttribute('id') + '"]');
}
} else if (elm.hasAttribute('class')) {
segs.unshift(elm.localName.toLowerCase() + '[@class="' + elm.getAttribute('class') + '"]');
} else {
for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) {
if (sib.localName === elm.localName) {
i++;
}
}
segs.unshift(elm.localName.toLowerCase() + '[' + i + ']');
}
}
return segs.length ? '/' + segs.join('/') : null;
}
function lookupElementByXPath(path) {
var evaluator = new XPathEvaluator();
var result = evaluator.evaluate(path, document.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return result.singleNodeValue;
}
function generateRandomTag(tagLen) {
tagLen = tagLen || 5;
var text = '';
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for(var i = 0; i < tagLen; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}