| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <style type="text/css"> |
| 4 video { |
| 5 display: none; |
| 6 } |
| 7 </style> |
| 8 </head> |
| 9 <body> |
| 10 <video id="video"> |
| 11 <source src="resources/canvas_video.webm" type="video/webm" /> |
| 12 </video> |
| 13 <canvas id="videoPattern" width="100" height="100"></canvas> |
| 14 <canvas id="imagePattern" width="100" height="100"></canvas> |
| 15 <canvas id="canvasPattern" width="100" height="100"></canvas> |
| 16 <script> |
| 17 function drawPatternFromImageSourceToCanvas(offscreenCanvas, imageSource, output
Canvas, repetitionType) { |
| 18 var offscreenCanvasCtx = offscreenCanvas.getContext('2d'); |
| 19 var pattern = offscreenCanvasCtx.createPattern(imageSource, repetitionType); |
| 20 offscreenCanvasCtx.fillStyle = pattern; |
| 21 offscreenCanvasCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.hei
ght); |
| 22 var outputCanvasRenderer = outputCanvas.getContext("bitmaprenderer"); |
| 23 outputCanvasRenderer.transferFromImageBitmap(offscreenCanvas.transferToImage
Bitmap()); |
| 24 } |
| 25 |
| 26 function createPatternFromVideo() { |
| 27 var canvas_video = new OffscreenCanvas(100, 100); |
| 28 var video = document.getElementById('video'); |
| 29 var videoOnPlay = function() { |
| 30 video.removeEventListener("playing", videoOnPlay); |
| 31 drawPatternFromImageSourceToCanvas(canvas_video, video, document.getElem
entById('videoPattern'), "no-repeat"); |
| 32 }; |
| 33 video.addEventListener("playing", videoOnPlay, true); |
| 34 video.play(); |
| 35 } |
| 36 |
| 37 function createPatternFromImage() { |
| 38 var canvas_image = new OffscreenCanvas(100, 100); |
| 39 var image = new Image(); |
| 40 var imageOnLoad = function() { |
| 41 image.removeEventListener("load", imageOnLoad); |
| 42 drawPatternFromImageSourceToCanvas(canvas_image, image, document.getElem
entById('imagePattern'), "repeat"); |
| 43 }; |
| 44 image.addEventListener("load", imageOnLoad); |
| 45 image.src = "resources/pattern.png"; |
| 46 } |
| 47 |
| 48 function createPatternFromCanvas() { |
| 49 var canvas_canvas = new OffscreenCanvas(100, 100); |
| 50 var htmlCanvas = document.createElement('canvas'); |
| 51 htmlCanvas.width = 10; |
| 52 htmlCanvas.height = 50; |
| 53 var htmlCanvasCtx = htmlCanvas.getContext("2d"); |
| 54 htmlCanvasCtx.fillStyle = "blue"; |
| 55 htmlCanvasCtx.fillRect(0, 0, 5, 50); |
| 56 htmlCanvasCtx.fillStyle = "red"; |
| 57 htmlCanvasCtx.fillRect(5, 0, 10, 50); |
| 58 drawPatternFromImageSourceToCanvas(canvas_canvas, htmlCanvas, document.getEl
ementById('canvasPattern'), "repeat-x"); |
| 59 |
| 60 } |
| 61 |
| 62 createPatternFromVideo(); |
| 63 createPatternFromImage(); |
| 64 createPatternFromCanvas(); |
| 65 </script> |
| 66 </body> |
| 67 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1954533002:
Implement wouldTaintOrigin and expose createPattern for OCRC2D on main thread (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master