Domvas implements the missing piece that connects the DOM and Canvas.

Related tags

Learning resource domvas
Overview

Domvas

Overview

Domvas implements the missing piece that connects the DOM and Canvas. It gives to the ability to take arbitrary DOM content and paint it to a Canvas of your choice.

Usage

var canvas = document.getElementById("test");
var context = canvas.getContext('2d');

domvas.toImage(document.getElementById("dom"), function() {
    context.drawImage(this, 20, 20);
});

Syntax

domvas.toImage(domElement, readyCallback, width, height, left, top);

readyCallback's 'this' and first argument points to a valid, preloaded image node that you can simply draw to your canvas context.

How it works

Domvas uses a feature of SVG that allows you to embed XHTML content into the SVG – and as you might know, the actual SVG can be used as a data uri, and therefore behaves like a standard image.

I have written about this technique in 2008 when I brought CSS transforms to browsers that did not have them. It took a little more experimentation to transform it into a reusable plugin: HTML content needs to be serialized to XML, and all styles have to be inlined.

Caveats

  • Internet Explorer is not supported, as it doesn't support the foreignObject tag in SVG.
  • For whatever reason, Opera is failing. I am not sure why. If a Opera pal is reading this, get in touch!
  • SVG's foreignObject is subject to strong security – meaning any external content will likely fail (i.e. iframes, web fonts)
  • The DOM object is not linked, but copied – if you change the style of the DOM object, it will not automatically update in Canvas
  • Content outside the bounding box of the element will be cut of per default if painted to Canvas. Don't worry though, simply pass a more comfortable offset to the toImage function (see above)

Credits / License

©2012 Paul Bakaus. Licensed under MIT. Reach out on Twitter!

Comments
  • About WeChat applet can not operate DOM use problem

    About WeChat applet can not operate DOM use problem

    It's impossible to operate DOM in a small program. There's no way to do it except using his own canvas method. I think there's a node that can grab a screen directly into a img picture and not draw it out.

    opened by helloZh4n 1
  • Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

    Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

    I get this error when I installed domvas.min.js but I don't know what I need to do to fix this. Am I missing a file?

    error => Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

    opened by medev21 0
  • Uncaught error in Safari/iOS with HTML containing  

    Uncaught error in Safari/iOS with HTML containing  

    When the DOM element is serialized, if the serialized string contains " ", the Image throws an onerror event. (that is swallowed)

    I suppose this is more of a Safari bug.

    However, the issue can be avoided by doing the following:

    // serialize the DOM node to a String
var serialized = new XMLSerializer().serializeToString(elem);
serialized.replace(/ /gi, '');

    or perhaps another more efficient solution. In my specific use case I don't care if the non-breaking-space ends up breaking, but I can see where this might be an issue for others

    EDIT: The above code didn't work, had to do this...

    // collect all nodes within the element, copy the current style to the clone
Array.prototype.forEach.call(children, function(child, i) {
     copyCSS(child, origChildren[i]);
     child.innerHTML = child.innerHTML.replace(/ /gi, '');
});
    opened by jonpikum 0
  • img.onload not getting fired on Android

    img.onload not getting fired on Android

    Greetings,

    I have an HTML5 hybrid app (Angular/Cordova 3.6.3). In the app, I'm using domvas to convert an iframe to an image. This works fine in Chrome but when i try to run it on my android device, the img.onload event doesn't seem to fire. It's not throwing any exceptions or errors...so i'm not sure why it's not firing. I'm guessing it may have to do with your stated caveat about the security restrictions surrounding the foreignObject.

    opened by rwtaylorjr 1
  • gh-pages javascript

    gh-pages javascript

    The gh-pages reports with latest Chrome.

    Refused to execute script from 'http://raw.github.com/pbakaus/domvas/master/src/domvas.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

    Maybe need to include domvas source in gh-pages, and load it from there.

    btw.. nice project!

    opened by larryxiao 0
Owner
Paul Bakaus
Paul Bakaus
GitHub
🕯️💐One Piece Community Memorials

??️ ?? One Piece Community Memorials "When do you think people die? When they are shot through the heart by the bullet of a pistol? No. When they are

null 12 Aug 23, 2022
Um jogo da memória tematizado com One Piece.

Getting Started - Jogo da Memória Eis um joguinho da memória . Também foi o primeiro projeto meio complicadinho que consegui resolver por conta própri

Gabriel Machado 14 Sep 27, 2022
🐢🦕 The missing child of Node.js and Deno.

Venode The missing child of Node.js and Deno. Venode is a node runner that supports deno features like vendoring and http imports! Features Javascript

M. Bagher Abiat 178 Aug 18, 2022
Contracts with missing implementation details and unit tests to help guide junior solidity developers.

template-challenge-staking Contracts with missing implementation details and unit tests to help guide junior solidity developers. Getting started Open

BuiltByFrancis 4 Oct 7, 2022
Missing Person Finder re-design

Missing Person Finder With ReactJs #Technology Used React Routing with React-routing-dom Redux with Redux Persist API calling with axios Ant design UI

Itp Manish 0 Jul 12, 2022
The missing CLI for beautiful, interactive API docs powered by with Stoplight Elements

Elements CLI The missing CLI for beautiful, interactive API docs powered by with Stoplight Elements Installation Install using npm as global package:

skriptfabrik GmbH 6 Nov 22, 2022
This is a Blockchain contract app built with solidity, ethersjs, nodejs, and the hardhart library. Connects to metamask as well.

Dribble - Hardtjs, Etherjs, Metamask Project About Dribble is my first blockchain, web 3.0 application that you could use to deposit ethereum into a w

Gerald Maduabuchi 9 Jun 17, 2022
This is a Blockchain contract app built with solidity, ethersjs, nodejs, and the hardhart library. Connects to metamask as well.

Dribble - Hardtjs, Etherjs, Metamask Project About Dribble is my first blockchain, web 3.0 application that you could use to deposit ethereum into a w

Gerald Maduabuchi 8 May 9, 2022
A Discord Bot that connects to your AzerothCore server so you / users can manage the server / character

A Discord Bot that connects to your AzerothCore server so you / users can manage the server / character. Made for AzerothCore / azerothcore-tools

Xander 4 Sep 24, 2022
[GSoC Project] Rocket.Chat App that connects with Figma

Getting Started Now that you have generated a blank default Rocket.Chat App, what are you supposed to do next? Start developing! Open up your favorite

Rocket.Chat 6 Dec 12, 2022
A mesh network that connects remote communities to emergency responders without relying on internet, cell towers, or satellites

A mesh network that connects remote communities to emergency responders without relying on internet, cell towers, or satellites. Winner of Hack the North 2022. ??

Alice Cai 4 Sep 23, 2022
Generates an image from a DOM node using HTML5 canvas

DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in Java

Anatolii Saienko 9.1k Jan 3, 2023
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
implements user authentication and session management using Express.js, MongoDB, and secure cookies

Auth-Flow This project is a simple user authentication system that uses Express.js and MongoDB to store user data. The system allows users to sign up

Abdelrahman Ali 4 Mar 17, 2023
A starter next.js + solidity project that implements merkle trees

Create Merkle App By Backseats This is an example app that shows you how to use a Merkle tree for your allow list Includes a partial contract contract

null 6 Nov 6, 2022
A script that implements a GUI to make cheating on Blooket easier than ever.

BlooketUI What's BlooketUI? A script that implements a GUI to make cheating on Blooket easier than ever. How do i Use This? Copy the code of src.js by

null 66 Dec 24, 2022
Implements live reload functionality to Adobe extension development.

Adobe Live Reload Adobe Live Reload implements live reload functionality to Adobe extension development. Features Reload Adobe Extensions on file save

Duncan Lutz 4 Apr 24, 2022
Userland module that implements the module path mapping that Node.js does with "exports" in package.json

exports-map Userland module that implements the module path mapping that Node.js does with "exports" in package.json npm install exports-map Usage co

Mathias Buus 9 May 31, 2022