79 lines
2.5 KiB
HTML
79 lines
2.5 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
img { border: 1px solid black; }
|
|
pre { display: inline-block; margin: 5px; }
|
|
</style>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
function draw()
|
|
{
|
|
var canvas = document.getElementById("canvas");
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
ctx.fillStyle = "rgb(200,0,0)";
|
|
ctx.fillRect(10, 10, 55, 50);
|
|
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
|
|
ctx.fillRect(30, 30, 55, 50);
|
|
|
|
testToDataURL();
|
|
}
|
|
|
|
// Default list of supported image formats.
|
|
var supportedMIMETypes = [
|
|
"image/png",
|
|
"image/jpeg",
|
|
"image/gif",
|
|
];
|
|
|
|
function testToDataURL()
|
|
{
|
|
// Test supported MIME types
|
|
for (var i in supportedMIMETypes) {
|
|
testMIMEType(supportedMIMETypes[i]);
|
|
}
|
|
|
|
// Test no MIME type
|
|
testMIMEType();
|
|
testMIMEType(null);
|
|
testMIMEType(undefined);
|
|
|
|
// Test other formats that we don't support
|
|
testMIMEType("image/x-webkitbitmap");
|
|
}
|
|
|
|
function testMIMEType(mime)
|
|
{
|
|
var canvas = document.getElementById("canvas");
|
|
|
|
var hadArgument = arguments.length;
|
|
var url;
|
|
if (!hadArgument)
|
|
url = canvas.toDataURL();
|
|
else
|
|
url = canvas.toDataURL(mime);
|
|
|
|
var image = document.createElement("img");
|
|
image.src = url;
|
|
var usedMIMEType = url.substring(5, url.search(/;/));
|
|
document.body.appendChild(image);
|
|
var info = document.createElement("pre");
|
|
info.appendChild(document.createTextNode("Given MIMEType: " + (hadArgument ? mime : "")));
|
|
info.appendChild(document.createTextNode("\n"));
|
|
info.appendChild(document.createTextNode("Used MIMEType: " + usedMIMEType));
|
|
info.appendChild(document.createTextNode("\n"));
|
|
info.appendChild(document.createTextNode((mime == usedMIMEType) ? "MIME types are the SAME." : "MIME types DIFFER."));
|
|
info.appendChild(document.createTextNode("\n\n"));
|
|
|
|
document.body.appendChild(info);
|
|
document.body.appendChild(document.createElement("hr"));
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="draw();">
|
|
<canvas id="canvas" width="150" height="150"></canvas> The Actual Canvas <br><hr>
|
|
</body>
|
|
</html>
|