궁극적 인 목표는 렌더링 된 프리젠 테이션 MathML을 .PNG 파일로 저장하는 것입니다. 위험 할 프로그래밍에 대해 충분히 알면 :-)이 작업을 수행하는 더 좋은 방법이있을 수 있습니다 ... 캔버스 요소에 방정식을 그 다음 캔버스 요소를 .PNG로 저장하려고합니다. https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas - - 나는 코드는 여기에서 시작 다음과 같이 수정 :png로 html5 캔버스로 렌더링 된 mathml 저장
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1998/Math/MathML' style='fontsize:40px'>" +
"<math>" +
"<mtable>" +
"<mtr>" +
"<mtd columnalign='right'>" +
"<mn>2</mn>" +
"<mi>x</mi>" +
"<mo>+</mo>" +
"<mn>3</mn>" +
"<mo>−</mo>" +
"<mn>3</mn>" +
"</mtd>" +
"<mtd columnalign='center'> " +
"<mo>=</mo>" +
"</mtd>" +
"<mtd columnalign='left'> " +
"<mn>9</mn>" +
"<mo>−</mo>" +
"<mn>3</mn>" +
"</mtd>" +
"</mtr>" +
"</mtable>" +
"</math>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var svg = new (self.BlobBuilder || self.MozBlobBuilder || self.WebKitBlobBuilder);
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
svg.append(data);
var url = DOMURL.createObjectURL(svg.getBlob("image/svg+xml;charset=utf-8"));
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
window.open(canvas.toDataURL('image/png'));
</script>
</body>
</html>
나는 캔버스 요소에 MathML을 볼 수있는 window.open을 주석, 그러나 toDataURL에 의해 생성 된 .PNG 인 경우 그냥 투명 (수학 방정식 없음). 내가 뭘 놓치고 있니? 미리 감사드립니다 ...
흠, 내가이 문을 이동할 때 "보안 오류"가 표시됩니다. –
toDataURL에서 일어난 것처럼 보입니다 ... 아마도 캔버스는 결국 "더러운"것입니다 ... –
그냥 "보안 오류"- 코드 없음 –