encoder.html (3675B)
1 <html class="reftest-wait"> 2 <head> 3 <title>Image reftest wrapper</title> 4 <link rel="stylesheet" href="ImageDocument.css"> 5 <style type="text/css"> 6 #image_from_encoder { background-color: rgb(10, 100, 250); } 7 </style> 8 9 <script> 10 // Parse out the URL command line params 11 // Valid options are: 12 // - img=<reference image to use> 13 // - mime=<mime type> 14 // - options=<canvas toDataURL encoder options> 15 // Example: 16 // encoder.html?img=escape(reference_image.png) 17 // &mime=escape(image/ico) 18 // &options=escape(-moz-parse-options:bpp=24;format=png) 19 var getVars = {}; 20 function buildValue(sValue) 21 { 22 if (/^\s*$/.test(sValue)) { 23 return null; 24 } 25 if (/^(true|false)$/i.test(sValue)) { 26 return sValue.toLowerCase() === "true"; 27 } 28 if (isFinite(sValue)) { 29 return parseFloat(sValue); 30 } 31 if (isFinite(Date.parse(sValue))) { 32 return new Date(sValue); 33 } 34 return sValue; 35 } 36 if (window.location.search.length > 1) { 37 var couple, couples = window.location.search.substr(1).split("&"); 38 for (var couplId = 0; couplId < couples.length; couplId++) { 39 couple = couples[couplId].split("="); 40 getVars[unescape(couple[0])] = couple.length > 1 ? 41 buildValue(unescape(couple[1])) : null; 42 } 43 } 44 45 // Create the image that we will load the reference image to 46 var img = new Image(); 47 48 // Create the canvas that we will draw the image img onto and 49 // eventually call toDataURL to invoke the encoder on 50 var canvas = document.createElement("canvas"); 51 52 // Starts the test by loading the reference image 53 function runTest() 54 { 55 // Load the reference image to start the test 56 img.onload = onReferenceImageLoad; 57 img.onerror = onReferenceImageLoad; 58 img.src = getVars.img; 59 } 60 61 // Once the encoded image from the canvas is loaded we can 62 // let the reftest compare 63 function onEncodedImageLoad() 64 { 65 document.documentElement.removeAttribute("class"); 66 } 67 68 // Once the image loads async, we then draw the image onto the canvas, 69 // and call canvas.toDataURL to invoke the encoder, and then set a new 70 // image to the encoded data URL 71 function onReferenceImageLoad() 72 { 73 // mimeType will hold the mime type of which encoder to invoke 74 var mimeType = getVars.mime; 75 // parseOptions will hold the encoder options to use 76 var parseOptions = getVars.options; 77 78 // Obtain the canvas and draw the reference image 79 canvas.width = img.width; 80 canvas.height = img.height; 81 var ctx = canvas.getContext('2d') 82 ctx.drawImage(img, 0, 0); 83 84 // Obtain the data URL with parsing options if specified 85 var dataURL; 86 if (parseOptions) 87 dataURL = canvas.toDataURL(mimeType, parseOptions); 88 else 89 dataURL = canvas.toDataURL(mimeType); 90 91 // Setup async image loaded events 92 var image_from_encoder = document.getElementById('image_from_encoder'); 93 image_from_encoder.onload = onEncodedImageLoad; 94 image_from_encoder.onerror = onEncodedImageLoad; 95 96 // Only set the image if we have the correct mime type 97 // because we want to fail the ref test if toDataURL fell 98 // back to image/png 99 if (dataURL.substring(0, mimeType.length+5) == "data:" + mimeType) { 100 // Set the image to the BMP data URL 101 image_from_encoder.src = dataURL; 102 } else { 103 // Blank image so that we won't have to timeout the reftest 104 image_from_encoder.src = "data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D"; 105 } 106 }; 107 </script> 108 </head> 109 110 <body onload="runTest()"> 111 <img id="image_from_encoder"> 112 </body> 113 </html>