| <!DOCTYPE html> |
| <title>Image sampling techniques</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script> |
| |
| <style> |
| #draw { |
| border: 1px dashed grey; |
| } |
| figcaption { |
| max-width: 800px; |
| } |
| </style> |
| |
| <body> |
| <h1>Image sampling techniques</h1> |
| |
| <div class="slidecontainer"> |
| <input style="width:400px;" type="range" min="-10" max="10" value="0" step="0.01" |
| class="slider" id="scale_slider" title="Scale"> |
| </div> |
| |
| <figure> |
| <!-- width/height hard-coded for grid of 256px images. --> |
| <div ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> |
| <canvas id="draw" width=868 height=592></canvas> |
| </div> |
| <figcaption> |
| Drop an Image onto the rectangle above |
| </figcaption> |
| </figure> |
| |
| </body> |
| |
| <script type="text/javascript" charset="utf-8"> |
| function preventScrolling(elem) { |
| elem.addEventListener('touchmove', (e) => { |
| // Prevents touch events in the element from scrolling. |
| e.preventDefault(); |
| e.stopPropagation(); |
| }); |
| } |
| |
| function dragOverHandler(ev) { ev.preventDefault(); } |
| |
| // these can be changed with click/drag on the primary rectangle |
| let cell_width = 256, |
| cell_height = 256; |
| |
| let image = null; |
| let CK = null; |
| let surface = null; |
| let drawFrame = null; |
| |
| function dropHandler(ev) { |
| ev.preventDefault(); |
| |
| let file = null; |
| if (ev.dataTransfer.items) { |
| // Use DataTransferItemList interface to access the file(s) |
| for (item of ev.dataTransfer.items) { |
| // If dropped items aren't files, reject them |
| if (item.kind === 'file') { |
| file = item.getAsFile(); |
| break; |
| } |
| } |
| } else { |
| // Use DataTransfer interface to access the file(s) |
| for (f of ev.dataTransfer.files) { |
| file = f; |
| break; |
| } |
| } |
| if (file) { |
| file.arrayBuffer().then(buffer => { |
| image = CK.MakeImageFromEncoded(buffer); |
| surface.requestAnimationFrame(drawFrame); |
| }); |
| } |
| } |
| |
| const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/' + file }); |
| |
| ckLoaded.then((_CK) => { |
| CK = _CK; |
| surface = CK.MakeCanvasSurface('draw'); |
| if (!surface) { |
| throw 'Could not make surface'; |
| } |
| |
| const font = new CK.Font(null, 15); |
| const paint = new CK.Paint(); |
| const textPaint = new CK.Paint(); |
| const TX = 20, |
| TY = 30; // where we start the first rectangle |
| |
| scale_slider.oninput = () => { surface.requestAnimationFrame(drawFrame); }; |
| |
| m33_scaled = function(sx, sy) { |
| if (!sy) sy = sx; |
| let m = new Float32Array(9); |
| m[0] = sx; m[4] = sy; m[8] = 1; |
| return m; |
| } |
| |
| drawFrame = function(canvas) { |
| if (!image) return; |
| |
| const scale = scale_slider.valueAsNumber < 0 ? 1 / (1 - scale_slider.valueAsNumber) |
| : (1 + scale_slider.valueAsNumber); |
| |
| const bounds = [0, 0, cell_width, cell_height]; |
| |
| const lm = m33_scaled(scale, scale); |
| |
| const samplings = [ |
| [CK.FilterMode.Nearest, CK.MipmapMode.None, 0, 0, "Nearest"], |
| [CK.FilterMode.Linear, CK.MipmapMode.None, 0, 0, "Bilerp"], |
| [CK.FilterMode.Linear, CK.MipmapMode.Linear, 0, 0, "Trilerp"], |
| [null, null, 0, 0.5, "CatmullRom"], |
| [null, null, 1/3.0, 1/3.0, "Mitchell"], |
| ]; |
| |
| const tile = CK.TileMode.Repeat; |
| |
| canvas.save(); |
| canvas.translate(TX, TY); |
| canvas.save(); |
| for (i in samplings) { |
| if (i == 3) { |
| canvas.restore(); |
| canvas.translate(0, bounds[3] - bounds[1] + 30); |
| canvas.save(); |
| } |
| |
| const s = samplings[i]; |
| const shader = s[0] ? image.makeShaderOptions(tile, tile, s[0], s[1], lm) |
| : image.makeShaderCubic( tile, tile, s[2], s[3], lm); |
| paint.setShader(shader); |
| canvas.drawRect(bounds, paint); |
| shader.delete(); |
| |
| canvas.drawText(s[4], 20, -8, textPaint, font); |
| |
| canvas.translate(bounds[2] - bounds[0] + 30, 0); |
| } |
| canvas.restore(); |
| canvas.restore(); |
| // draw the drag handle |
| if (true) { |
| canvas.save(); |
| paint.setShader(null); |
| paint.setColor(CK.Color4f(1, 0, 0)); |
| paint.setStrokeWidth(2); |
| canvas.translate(TX + cell_width + 4, TY + cell_height + 4); |
| canvas.drawLine(-12, 0, 0, 0, paint); |
| canvas.drawLine( 0, -12, 0, 0, paint); |
| canvas.restore() |
| } |
| }; |
| |
| // register our mouse handler |
| { |
| function len2(x, y) { |
| return x*x + y*y; |
| } |
| function hit_test(x,y, x1,y1) { |
| return len2(x-x1, y-y1) <= 10*10; |
| } |
| |
| let do_drag = false; |
| function pointer_up(e) { |
| do_drag = false; |
| } |
| function pointer_down(e) { |
| do_drag = hit_test(TX+cell_width, TY+cell_height, e.offsetX, e.offsetY); |
| } |
| function pointer_move(e) { |
| if (e.pressure && do_drag) { |
| cell_width = Math.max(e.offsetX - TX, 32); |
| cell_height = Math.max(e.offsetY - TY, 32); |
| surface.requestAnimationFrame(drawFrame); |
| } |
| } |
| |
| const elem = document.getElementById('draw'); |
| elem.addEventListener('pointermove', pointer_move); |
| elem.addEventListener('pointerdown', pointer_down); |
| elem.addEventListener('pointerup', pointer_up); |
| preventScrolling(elem); |
| } |
| |
| surface.requestAnimationFrame(drawFrame); |
| }); |
| |
| </script> |
