| <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/webp", |
| ]; |
| |
| 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/gif"); |
| 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> |
