<!DOCTYPE HTML> <title>Canvas test: toBlob</title> <script src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" href="/tests/SimpleTest/test.css"> <body> <canvas id="c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> <script> function BlobListener(type, canvas, callback, file) { is(file.type, type, "When a valid type is specified that should be returned"); var reader = new FileReader(); reader.onload = function(e) { is(e.target.result, canvas.toDataURL(type), "<canvas>.mozGetAsFile().getAsDataURL() should equal <canvas>.toDataURL()"); callback(canvas); }; reader.readAsDataURL(file); } function test1(canvas) { canvas.toBlob(BlobListener.bind(undefined, "image/png", canvas, test2)); } function test2(canvas) { canvas.toBlob( BlobListener.bind(undefined, "image/jpeg", canvas, SimpleTest.finish), "image/jpeg"); } SimpleTest.waitForExplicitFinish(); addLoadEvent(function () { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); ctx.drawImage(document.getElementById('yellow75.png'), 0, 0); test1(canvas); }); </script> <img src="image_yellow75.png" id="yellow75.png" class="resource">