Chromium Code Reviews Chromium Code Reviews
Issue 2181183003:
Expose imageSmothing attributes in OffscreenCanvas 2D context (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <p>Below this text, there should be a checker pattern that is drawn pixelated, a nd with low, medium and high filtering quality.</p> | |
| 3 <canvas id="canvasOutput" width="250" height="50"></canvas> | |
| 4 <script> | |
| 5 if (window.testRunner) { | |
| 6 testRunner.waitUntilDone(); | |
| 7 } | |
| 8 var checkerCanvas = document.createElement('canvas'); | |
| 9 checkerCanvas.width = checkerCanvas.height = 5; | |
| 10 var checkerContext = checkerCanvas.getContext('2d'); | |
| 11 var checkerData = checkerContext.createImageData(5,5); | |
| 12 for (pixel = 0; pixel < 25; pixel++) { | |
| 13 var color = (pixel % 2) * 255; | |
| 14 checkerData.data[pixel * 4 + 0] = color; | |
| 15 checkerData.data[pixel * 4 + 1] = color; | |
| 16 checkerData.data[pixel * 4 + 2] = color; | |
| 17 checkerData.data[pixel * 4 + 3] = 255; | |
| 18 } | |
| 19 checkerContext.putImageData(checkerData, 0, 0); | |
| 20 createImageBitmap(checkerCanvas).then(image => { | |
| 21 var osCanvas = new OffscreenCanvas(250, 50); | |
| 22 var ctx = osCanvas.getContext('2d'); | |
| 23 ctx.scale(10, 10) | |
| 24 ctx.imageSmoothingEnabled = false; | |
| 25 ctx.drawImage(image, 0, 0); | |
| 26 ctx.imageSmoothingEnabled = true; | |
| 27 ctx.imageSmoothingQuality = 'low'; | |
| 28 ctx.drawImage(image, 6, 0); | |
|
xlai (Olivia)
2016/07/27 14:18:04
I'm just wondering: why you drawImage to position
| |
| 29 ctx.imageSmoothingQuality = 'medium'; | |
| 30 ctx.drawImage(image, 12, 0); | |
| 31 ctx.imageSmoothingQuality = 'high'; | |
| 32 ctx.drawImage(image, 18, 0); | |
| 33 var outputCanvas = document.getElementById('canvasOutput'); | |
| 34 var outputCanvasRenderer = outputCanvas.getContext('bitmaprenderer'); | |
| 35 outputCanvasRenderer.transferFromImageBitmap(osCanvas.transferToImageBitmap( )); | |
| 36 if (window.testRunner) { | |
| 37 testRunner.notifyDone(); | |
| 38 } | |
| 39 }); | |
| 40 </script> | |
| OLD | NEW |
