{"ScriptPreparationCode":"// const sourceImage = new Image();\r\nconst sourceImage = document.querySelector(\u0027#source\u0027);\r\nconst imageLoaded = new Promise((resolve, reject) =\u003E {\r\n if (sourceImage.complete) resolve(sourceImage);\r\n sourceImage.onload = () =\u003E resolve(sourceImage);\r\n sourceImage.onerror = reject;\r\n // resolve(source1);\r\n});\r\n\r\nfunction scaleSource(sw, sh, dw, dh) {\r\n const hRatio = dw / sw;\r\n const vRatio = dh / sh;\r\n const ratio = Math.max(hRatio, vRatio);\r\n const x = (sw - dw / ratio) / 2;\r\n const y = (sh - dh / ratio) / 2;\r\n return { x, y, w: sw - x * 2, h: sh - y * 2, ratio };\r\n}\r\n\r\nconst profileWidth = 480;\r\nconst profileHeight = 360;\r\n\r\n// Remember, all the outputs must be an ImageBitmap to be a fair comparison\r\n\r\n// case 1: use createImageBitmap to crop and resize, bugged in firefox but working in Chrome\r\nasync function case1_createImageBitmap() {\r\n const source = await imageLoaded;\r\n const resize = scaleSource(\r\n source.width,\r\n source.height,\r\n profileWidth,\r\n profileHeight\r\n );\r\n\r\n const bitmap = await window.createImageBitmap(\r\n source,\r\n resize.x,\r\n resize.y,\r\n resize.w,\r\n resize.h,\r\n {\r\n resizeWidth: profileWidth,\r\n resizeHeight: profileHeight\r\n }\r\n );\r\n\r\n return bitmap;\r\n}\r\n\r\n// case 2: use canvas to crop and resize\r\nconst canvas = document.createElement(\u0022canvas\u0022);\r\nconst ctx = canvas.getContext(\u00222d\u0022, { alpha: false });\r\nasync function case2_canvas() {\r\n const source = await imageLoaded;\r\n const resize = scaleSource(\r\n source.width,\r\n source.height,\r\n profileWidth,\r\n profileHeight\r\n );\r\n\r\n canvas.width = profileWidth;\r\n canvas.height = profileHeight;\r\n\r\n ctx.drawImage(\r\n source,\r\n resize.x,\r\n resize.y,\r\n resize.w,\r\n resize.h,\r\n 0,\r\n 0,\r\n profileWidth,\r\n profileHeight\r\n );\r\n\r\n return await window.createImageBitmap(\r\n canvas,\r\n 0,\r\n 0,\r\n profileWidth,\r\n profileHeight\r\n );\r\n}\r\n\r\n// case 3: no scaling, use createImageBitmap to copy and allow one-off\r\n// transfer to worker (where presumably scaling would occur) without\r\n// requiring new canvas/context creation\r\nasync function case3_scaleInWorker() {\r\n const source = await imageLoaded;\r\n const bitmap = await window.createImageBitmap(source);\r\n return bitmap;\r\n}\r\n\r\nvar holder = [];","TestCases":[{"Name":"Crop and Resize using createImageBitmap, currently bugged in FF 111.0","Code":"case1_createImageBitmap()\r\n\t.then(bitmap =\u003E bitmap.close());","IsDeferred":false},{"Name":"Crop and Resize using Canvas scaling, usually somewhat slow","Code":"case2_canvas()\r\n\t.then(bitmap =\u003E bitmap.close());","IsDeferred":false},{"Name":"No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)","Code":"case3_scaleInWorker() \r\n\t.then(bitmap =\u003E bitmap.close());","IsDeferred":false}]}