### NPM Installation and Import

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

Demonstrates how to install the library via NPM and import it into an ES6 or ES5 project.

```bash
npm install dom-to-image-more
```

```javascript
/* in ES 6 */
import domtoimage from 'dom-to-image-more';
/* in ES 5 */
var domtoimage = require('dom-to-image-more');
```

--------------------------------

### Filter styles example

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

Example of a `filterStyles` function that filters out CSS variables.

```javascript
filterStyles(node, propertyName) {
    return !propertyName.startssWith('--'); // to filter out CSS variables
}
```

--------------------------------

### Adjust cloned node example

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

Example of an `adjustClonedNode` function that modifies the cloned node's style.

```javascript
const adjustClone = (node, clone, after) => {
    if (!after && clone.id === 'element') {
        clone.style.transform = 'translateY(100px)';
    }
    return clone;
};

const wrapper = document.getElementById('wrapper'); 
const blob = domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone});
```

--------------------------------

### Get a PNG image blob and download it

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet demonstrates how to convert a DOM node to a PNG blob and download it using FileSaver.js.

```javascript
domtoimage.toBlob(document.getElementById('my-node')).then(function (blob) {
    window.saveAs(blob, 'my-node.png');
});
```

--------------------------------

### OCRad.js File Processing Functions

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/examples/file.html

This snippet shows the JavaScript functions for processing an image file using OCRad.js. It includes functions to convert an image to canvas, process an image from a URL, and process an image from a file.

```javascript
function OCRImage(image){
 var canvas = document.createElement('canvas')
 canvas.width = image.naturalWidth;
 canvas.height = image.naturalHeight;
 canvas.getContext('2d').drawImage(image, 0, 0)
 return OCRAD(canvas)
}

function OCRPath(url, callback){
 var image = new Image()
 image.src = url;
 image.onload = function(){
  callback(OCRImage(image))
 }
}

function OCRFile(file, callback){
 var reader = new FileReader();
 reader.onload = function(){
  OCRPath(reader.result, callback);
 }
 reader.readAsDataURL(file)
}
```

--------------------------------

### OCR an image from a URL

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/examples/url.html

This code snippet shows how to load an image from a URL, draw it onto a canvas, and then use OCRAD to extract text from it. The extracted text is then displayed in an alert box.

```javascript
function OCRImage(image){
 var canvas = document.createElement('canvas')
 canvas.width = image.naturalWidth;
 canvas.height = image.naturalHeight;
 canvas.getContext('2d').drawImage(image, 0, 0)
 return OCRAD(canvas)
}

function OCRPath(url, callback){
 var image = new Image()
 image.src = url;
 image.onload = function(){
  callback(OCRImage(image))
 }
}

OCRPath("message.png", function(words){
 alert(words)
})
```

--------------------------------

### Get a canvas object

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet shows how to convert a DOM node to a canvas object.

```javascript
domtoimage.toCanvas(document.getElementById('my-node')).then(function (canvas) {
    console.log('canvas', canvas.width, canvas.height);
});
```

--------------------------------

### Get the raw pixel data as a Uint8Array

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet demonstrates how to get the raw pixel data of a DOM node as a Uint8Array, where each pixel is represented by 4 RGBA values.

```javascript
var node = document.getElementById('my-node');

domtoimage.toPixelData(node).then(function (pixels) {
    for (var y = 0; y < node.scrollHeight; ++y) {
        for (var x = 0; x < node.scrollWidth; ++x) {
            pixelAtXYOffset = 4 * y * node.scrollHeight + 4 * x;
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
        }
    }
});
```

--------------------------------

### Get a PNG image base64-encoded data URL

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet shows how to convert a DOM node to a PNG data URL and display it as an image.

```javascript
var node = document.getElementById('my-node');

domtoimage
    .toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
```

--------------------------------

### OCRImage Function

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/examples/image.html

A JavaScript function that takes an image element, draws it onto a canvas, and then uses OCRAD to perform OCR on the canvas content.

```javascript
function OCRImage(image){ var canvas = document.createElement('canvas') canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; canvas.getContext('2d').drawImage(image, 0, 0) return OCRAD(canvas) }
```

--------------------------------

### Get an SVG data URL, filtering out specific elements

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet shows how to convert a DOM node to an SVG data URL while filtering out elements based on a condition.

```javascript
function filter(node) {
    return node.tagName !== 'i';
}

domtoimage
    .toSvg(document.getElementById('my-node'), { filter: filter })
    .then(function (dataUrl) {
        /* do something */
    });
```

--------------------------------

### Include ocrad.js

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

To use Ocrad.js, you first need to include the ocrad.js file, which is approximately 1MB in size.

```html
<script src="ocrad.js"></script>
```

--------------------------------

### Save and download a compressed JPEG image

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet shows how to convert a DOM node to a JPEG data URL with a specified quality and download it.

```javascript
domtoimage
    .toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });
```

--------------------------------

### OCRAD.js API - Open

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

Opens a descriptor.

```javascript
OCRAD.open()
```

--------------------------------

### JavaScript for Ocrad.js Demo

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

This JavaScript code initializes the canvas, defines arrays of quotes and fonts, shuffles them using the Fisher-Yates algorithm, and includes a function `da_word` to dynamically render text with a selected font and then run OCR on it.

```javascript
var quotes = ["Hello World!", "Goodnight, cruel world!", "Do not go gentle into that good night", "To be, or not to be: That is the question. Whether tis nobler in the mind to suffer the slings and arrows of outrageous fortune.", "You're not crazy!", "Time flies like an arrow, Fruit flies like a banana.", "This message is bludgeoning the deceased equine.", "Rawr! I'm a dinosaur!", "Hesitation is always easy but rarely useful.", "Quis custodiet ipsos custodes?", "Tuesday's meeting of the apathy club was canceled due to lack of interest.", "We sell your users so you don't have to!", "Life is good.", "A true magician never unveils his trick.", "Ceci n'est pas une pipe." ]; var fonts = ['Droid Sans', 'Philosopher', 'Alegreya Sans', 'Chango', 'Coming Soon', 'Allan', 'Cardo', 'Bubbler One', 'Bowlby One SC', 'Prosto One', 'Rufina', 'Cantora One', 'Denk One', 'Play', 'Architects Daughter', 'Nova Square', 'Inder', 'Gloria Hallelujah', 'Telex', 'Comfortaa', 'Merienda', 'Boogaloo', 'Krona One', 'Orienta', 'Sofadi One', 'Source Sans Pro', 'Revalia', 'Overlock', 'Kelly Slab', 'Rye', 'Butcherman', 'Lato', 'Milonga', 'Aladin', 'Princess Sofia', 'Audiowide', 'Italiana', 'Michroma', 'Cabin Condensed', 'Jura', 'Marko One', 'PT Mono', 'Bubblegum Sans', 'Amaranth'] function fisher_yates(a) { for (var i = a.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = a[i]; a[i] = a[j]; a[j] = temp; } } fisher_yates(fonts); fisher_yates(quotes); function da_word(){ reset_canvas() var font = fonts.shift(); fonts.push(font); // do a rotation if(Math.random() > 0.7){ var phrase = font; }else{ var phrase = quotes.shift() //quotes[Math.floor(quotes.length * Math.random())]; quotes.push(phrase); } WebFont.load({ google: { families: [font] }, active: function(){ o.font = '30px "' + font + '"' var words = phrase.split(' '), buf = [], n = 70; for(var i = 0; i < words.length; i++){ buf.push(words[i]) if(buf.join(' ').length > 15 || i == words.length - 1){ o.fillText(buf.join(' '), 50, n); buf = [] n += 50 } } runOCR(phrase); } }) } o.font = '30px sans-serif' o.fillText("Welcome to the Ocrad.js Demo!", 50, 100); runOCR();
```

--------------------------------

### Adjust cloned nodes before rendering

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet demonstrates how to adjust cloned nodes before they are rendered, using the `adjustClonedNode` option.

```javascript
const adjustClone = (node, clone, after) => {
    if (!after && clone.id === 'element') {
        clone.style.transform = 'translateY(100px)';
    }
    return clone;
};

const wrapper = document.getElementById('wrapper');
const blob = domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone });
```

--------------------------------

### TypeScript Type Definition for dom-to-image-more

Source: https://github.com/1904labs/dom-to-image-more/blob/main/README.md

This snippet shows how to create a type definition file for using dom-to-image-more with TypeScript.

```typescript
declare module 'dom-to-image-more' {
    import domToImage = require('dom-to-image-more');
    export = domToImage;
}
```

--------------------------------

### OCRAD.js API - Write File

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

This function writes a file with PBM Image Data.

```javascript
OCRAD.write_file(filename, PBM ImageData)
```

--------------------------------

### OCRAD.js API - Version

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

You can find the current version string by calling OCRAD.version().

```javascript
OCRAD.version()
```

--------------------------------

### Basic OCRAD function usage

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

The ocrad.js file exposes a single global function, OCRAD, which takes an image as an argument and returns the recognized text as a string. The image argument can be a canvas element, a Context2D instance, or an instance of ImageData.

```javascript
var string = OCRAD(image);
alert(string);
```

--------------------------------

### Custom Element Definition

Source: https://github.com/1904labs/dom-to-image-more/blob/main/spec/resources/shadow-dom/dom-node.html

Defines a custom element 'summary-display' that uses Shadow DOM.

```javascript
customElements.define( 'summary-display', class extends HTMLElement { constructor() { super(); const template = document.getElementById('summary-display-template'); const templateContent = template.content; const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(templateContent.cloneNode(true)); } } );
```

--------------------------------

### Drawing Canvas and Event Handlers

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

JavaScript code for handling canvas drawing, mouse events, and file uploads for OCR processing.

```javascript
var c = document.getElementById('c'), o = c.getContext('2d'); function reset_canvas(){ o.fillStyle = 'white' o.fillRect(0, 0, c.width, c.height) o.fillStyle = 'black' } // here's a really simple little drawing app so people can try their luck at // the lottery that is offline handwriting recognition var drag = false, lastX, lastY; c.onmousedown = function(e){ drag = true; lastX = 0; lastY = 0; e.preventDefault(); c.onmousemove(e) } c.onmouseup = function(e){ drag = false; e.preventDefault(); runOCR() } c.onmousemove = function(e){ e.preventDefault() var rect = c.getBoundingClientRect(); var r = 5; function dot(x, y){ o.beginPath() o.moveTo(x + r, y) o.arc(x, y, r, 0, Math.PI * 2) o.fill() } if(drag){ var x = e.clientX - rect.left, y = e.clientY - rect.top; if(lastX && lastY){ var dx = x - lastX, dy = y - lastY; var d = Math.sqrt(dx * dx + dy * dy); for(var i = 1; i < d; i += 2){ dot(lastX + dx / d * i, lastY + dy / d * i) } } dot(x, y) lastX = x; lastY = y; } } document.body.ondragover = function(){ document.body.className = 'dragging'; return false } document.body.ondragend = function(){ document.body.className = ''; return false } document.body.onclick = function(){document.body.className = '';} document.body.ondrop = function(e){ e.preventDefault(); document.body.className = ''; picked_file(e.dataTransfer.files[0]); return false; } function open_picker(){ var e = document.createEvent("MouseEvents"); e.initEvent('click', true, true); document.getElementById('picker').dispatchEvent(e); } function picked_file(file){ if(!file) return; // document.getElementById("output").className = 'processing' var ext = file.name.split('.').slice(-1)[0] var reader = new FileReader(); if(file.type == "image/x-portable-bitmap" || ext == 'pbm' || ext == 'pgm' || ext == 'pnm' || ext == 'ppm'){ reader.onload = function(){ reset_canvas(); document.getElementById("text").innerHTML = 'Recognizing Text... This may take a while...' o.font = '30px sans-serif' o.fillText('No previews for NetPBM format.', 50, 100); runOCR(new Uint8Array(reader.result), true); } reader.readAsArrayBuffer(file) }else{ reader.onload = function(){ var img = new Image(); img.src = reader.result; img.onerror = function(){ reset_canvas(); o.font = '30px sans-serif' o.fillText('Error: Invalid Image ' + file.name, 50, 100); } img.onload = function(){ document.getElementById("text").innerHTML = 'Recognizing Text... This may take a while...' reset_canvas(); var rat = Math.min(c.width / img.width, c.height / img.height); o.drawImage(img, 0, 0, img.width * rat, img.height * rat) var tmp = document.createElement('canvas') tmp.width = img.width; tmp.height = img.height; var ctx = tmp.getContext('2d') ctx.drawImage(img, 0, 0) var image_data = ctx.getImageData(0, 0, tmp.width, tmp.height); runOCR(image_data, true) } } reader.readAsDataURL(file) } }
```

--------------------------------

### OCR Worker and Execution

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

JavaScript code for running the OCR process in a web worker and handling the results.

```javascript
var lastWorker; var worker = new Worker('worker.js') function runOCR(image_data, raw_feed){ document.getElementById("output").className = 'processing' worker.onmessage = function(e){ document.getElementById("output").className = '' if('innerText' in document.getElementById("text")){ document.getElementById("text").innerText = e.data }else{ document.getElementById("text").textContent = e.data } document.getElementById('timing').innerHTML = 'recognition took ' + ((Date.now() - start)/1000).toFixed(2) + 's'; } var start = Date.now() if(!raw_feed){ image_data = o.getImageData(0, 0, c.width, c.height); } worker.postMessage(image_data) lastWorker = worker; } reset_canvas()
```

--------------------------------

### OCRAD.js API - Close

Source: https://github.com/1904labs/dom-to-image-more/blob/main/test-lib/ocrad-bower/demo.html

Closes a descriptor.

```javascript
OCRAD.close(descriptor)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.