Node-Canvas est une implémentation de toile soutenue par le Cairo pour Node.js.
Conseil
V3.0.0-RC2 est désormais disponible pour les tests sur Linux (X64 GLIBC), MacOS (x64) et Windows (x64)! C'est la première version à utiliser N-API et pré-install. Veuillez essayer et faites-nous savoir si vous rencontrez des problèmes.
npm install canvas@next
$ npm install canvas
Par défaut, les binaires prédéfinis seront téléchargés si vous êtes sur l'une des plates-formes suivantes:
Si vous souhaitez construire à partir de Source, utilisez npm install --build-from-source
et consultez la section de compilation ci-dessous.
La version minimale de Node.js requise est 18.12.0 .
Si vous n'avez pas de système d'exploitation ou d'architecture de processeur pris en charge, ou que vous utilisez --build-from-source
, le module sera compilé sur votre système. Cela nécessite plusieurs dépendances, dont le Caire et Pango.
Pour des informations d'installation détaillées, consultez le wiki. Les instructions d'installation en une ligne pour les Os communes sont ci-dessous. Notez que Libgif / Giflib, Librsvg et LibjPEG sont facultatifs et requis uniquement si vous avez besoin de support GIF, SVG et JPEG, respectivement. Le Cairo V1.10.0 ou ultérieure est requis.
OS | Commande |
---|---|
macos | Utilisation de Homebrew:brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptools |
Ubuntu | sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev |
Feutre | sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel |
Solaris | pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto |
Openbsd | doas pkg_add cairo pango png jpeg giflib |
Fenêtre | Voir le wiki |
Autres | Voir le wiki |
Mac OS X V10.11 +: Si vous avez récemment mis à jour vers Mac OS X V10.11 + et que vous rencontrez des problèmes lors de la compilation, exécutez la commande suivante: xcode-select --install
. En savoir plus sur le problème sur Stack Overflow. Si vous avez installé XCode 10.0 ou supérieur, afin de construire à partir de la source, vous avez besoin de NPM 6.4.1 ou supérieur.
const { createCanvas , loadImage } = require ( 'canvas' )
const canvas = createCanvas ( 200 , 200 )
const ctx = canvas . getContext ( '2d' )
// Write "Awesome!"
ctx . font = '30px Impact'
ctx . rotate ( 0.1 )
ctx . fillText ( 'Awesome!' , 50 , 100 )
// Draw line under text
var text = ctx . measureText ( 'Awesome!' )
ctx . strokeStyle = 'rgba(0,0,0,0.5)'
ctx . beginPath ( )
ctx . lineTo ( 50 , 102 )
ctx . lineTo ( 50 + text . width , 102 )
ctx . stroke ( )
// Draw cat with lime helmet
loadImage ( 'examples/images/lime-cat.jpg' ) . then ( ( image ) => {
ctx . drawImage ( image , 50 , 0 , 70 , 70 )
console . log ( '<img src="' + canvas . toDataURL ( ) + '" />' )
} )
Voir le Changelog pour un guide de mise à niveau de 1.x à 2.x.
Pour la documentation de la version 1.x, consultez la branche v1.x.
Ce projet est une implémentation de l'API Web Canvas Web et implémente cette API aussi étroitement que possible. Pour la documentation de l'API, veuillez visiter l'API du Canvas Web Mozilla. (Voir l'état de compatibilité pour la conformité actuelle de l'API.) Toutes les méthodes d'utilité et les API non standard sont documentées ci-dessous.
createCanvas ( width : number , height : number , type ?: 'PDF' | 'SVG' ) = > Canvas
Crée une instance de toile. Cette méthode fonctionne à la fois dans Node.js et les navigateurs Web, où il n'y a pas de constructeur Canvas. (Voir browser.js
pour l'implémentation qui s'exécute dans les navigateurs.)
const { createCanvas } = require ( 'canvas' )
const mycanvas = createCanvas ( 200 , 200 )
const myPDFcanvas = createCanvas ( 600 , 800 , 'pdf' ) // see "PDF Support" section
createImageData ( width : number , height : number ) = > ImageData createImageData ( data : Uint8ClampedArray , width : number , height ?: number ) = > ImageData // for alternative pixel formats: createImageData ( data : Uint16Array , width : number , height ?: number ) = > ImageData
Crée une instance iMagedata. Cette méthode fonctionne à la fois dans Node.js et les navigateurs Web.
const { createImageData } = require ( 'canvas' )
const width = 20 , height = 20
const arraySize = width * height * 4
const mydata = createImageData ( new Uint8ClampedArray ( arraySize ) , width )
loadImage ( ) = > Promise < Image >
Méthode de commodité pour charger des images. Cette méthode fonctionne à la fois dans Node.js et les navigateurs Web.
const { loadImage } = require ( 'canvas' )
const myimg = loadImage ( 'http://server.com/image.png' )
myimg . then ( ( ) => {
// do something with image
} ) . catch ( err => {
console . log ( 'oh no!' , err )
} )
// or with async/await:
const myimg = await loadImage ( 'http://server.com/image.png' )
// do something with image
registerFont ( path : string , { family : string , weight ?: string , style ?: string } ) = > void
Pour utiliser un fichier de police qui n'est pas installé comme police système, utilisez registerFont()
pour enregistrer la police avec Canvas. Cela doit être fait avant la création de la toile.
const { registerFont , createCanvas } = require ( 'canvas' )
registerFont ( 'comicsans.ttf' , { family : 'Comic Sans' } )
const canvas = createCanvas ( 500 , 500 )
const ctx = canvas . getContext ( '2d' )
ctx . font = '12px "Comic Sans"'
ctx . fillText ( 'Everyone hates this font :(' , 250 , 10 )
Le deuxième argument est un objet avec des propriétés qui ressemblent aux propriétés CSS qui sont spécifiées dans les règles @font-face
. Vous devez spécifier au moins family
. weight
et style
sont facultatifs et par défaut 'normal'
.
deregisterAllFonts ( ) = > void
Utilisez deregisterAllFonts
pour désinscrire toutes les polices qui ont été enregistrées précédemment. Cette méthode est utile lorsque vous souhaitez supprimer toutes les polices enregistrées, comme lorsque vous utilisez la toile dans les tests
const { registerFont , createCanvas , deregisterAllFonts } = require ( 'canvas' )
describe ( 'text rendering' , ( ) => {
afterEach ( ( ) => {
deregisterAllFonts ( ) ;
} )
it ( 'should render text with Comic Sans' , ( ) => {
registerFont ( 'comicsans.ttf' , { family : 'Comic Sans' } )
const canvas = createCanvas ( 500 , 500 )
const ctx = canvas . getContext ( '2d' )
ctx . font = '12px "Comic Sans"'
ctx . fillText ( 'Everyone loves this font :)' , 250 , 10 )
// assertScreenshot()
} )
} )
img . src : string | Buffer
Comme dans les navigateurs, img.src
peut être défini sur une data:
URI ou une URL distante. De plus, Node-Canvas permet de définir src
sur un chemin de fichier local ou une instance Buffer
.
const { Image } = require ( 'canvas' )
// From a buffer:
fs . readFile ( 'images/squid.png' , ( err , squid ) => {
if ( err ) throw err
const img = new Image ( )
img . onload = ( ) => ctx . drawImage ( img , 0 , 0 )
img . onerror = err => { throw err }
img . src = squid
} )
// From a local file path:
const img = new Image ( )
img . onload = ( ) => ctx . drawImage ( img , 0 , 0 )
img . onerror = err => { throw err }
img . src = 'images/squid.png'
// From a remote URL:
img . src = 'http://picsum.photos/200/300'
// ... as above
// From a `data:` URI:
img . src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
// ... as above
Remarque: Dans certains cas, img.src=
est actuellement synchrone. Cependant, vous devez toujours utiliser img.onload
et img.onerror
, car nous avons l'intention de faire img.src=
toujours asynchrone comme dans les navigateurs. Voir # 1007.
img . dataMode : number
S'applique aux images JPEG dessinées uniquement sur des toiles PDF.
Réglage img.dataMode = Image.MODE_MIME
ou Image.MODE_MIME|Image.MODE_IMAGE
permet le suivi des données MIME des images. Lorsque les données MIME sont suivies, les toiles PDF peuvent intégrer les JPEG directement dans la sortie, plutôt que de réencoder dans PNG. Cela peut réduire considérablement la taille des fichiers et accélérer le rendu.
const { Image , createCanvas } = require ( 'canvas' )
const canvas = createCanvas ( w , h , 'pdf' )
const img = new Image ( )
img . dataMode = Image . MODE_IMAGE // Only image data tracked
img . dataMode = Image . MODE_MIME // Only mime data tracked
img . dataMode = Image . MODE_MIME | Image . MODE_IMAGE // Both are tracked
Si vous travaillez avec une toile non-PDF, les données d'image doivent être suivies; Sinon, la sortie sera indésirable.
Activer le suivi des données MIME n'a aucun avantage (seulement un ralentissement) à moins que vous ne générez un PDF.
canvas . toBuffer ( ( err : Error | null , result : Buffer ) => void , mimeType ?: string , config ?: any ) = > void canvas . toBuffer ( mimeType ?: string , config ?: any ) = > Buffer
Crée un objet Buffer
représentant l'image contenue dans la toile.
raw
ou pour les toiles PDF ou SVG.image/png
, image/jpeg
(si Node-Canvas a été construit avec le support JPEG), des données raw
(non codées dans l'ordre BGRA sur les systèmes Little-Endian (la plupart), Argb sur les systèmes Big-Endan; Top-to-Bottom, ), application/pdf
(pour les toiles PDF) et image/svg+xml
(pour les toiles SVG). Par défaut, image/png
pour les toiles d'image, ou le type correspondant pour le canevas PDF ou SVG. Pour image/jpeg
, un objet spécifiant la qualité (0 à 1), si une compression progressive doit être utilisée et / ou si un sous-échantillonnage de chroma doit être utilisé: {quality: 0.75, progressive: false, chromaSubsampling: true}
. Toutes les propriétés sont facultatives.
Pour image/png
, un objet spécifiant le niveau de compression ZLIB (entre 0 et 9), le ou les filtres de compression, la palette (PNG indexée uniquement), l'index de la palette d'arrière-plan (PNG indexé uniquement) et / ou la résolution ( PPI): {compressionLevel: 6, filters: canvas.PNG_ALL_FILTERS, palette: undefined, backgroundIndex: 0, resolution: undefined}
. Toutes les propriétés sont facultatives.
Notez que le format PNG code la résolution en pixels par mètre, donc si vous spécifiez 96
, le fichier codera 3780 ppm (~ 96.01 ppi). La résolution n'est pas définie par défaut pour correspondre au comportement commun du navigateur.
Pour application/pdf
, un objet spécifiant les métadonnées de document facultatives: {title: string, author: string, subject: string, keywords: string, creator: string, creationDate: Date, modDate: Date}
. Toutes les propriétés sont facultatives et par défaut undefined
, à l'exception de creationDate
, qui par défaut à la date actuelle. L'ajout de métadonnées nécessite le Caire 1.16.0 ou version ultérieure.
Pour une description de ces propriétés, voir page 550 du PDF 32000-1: 2008.
Notez qu'il n'y a pas de séparateur standard pour keywords
. Un espace est recommandé car il est courant par d'autres applications, et le Caire enfermera la liste des mots clés en guillemets si une virgule ou un point-virgule est utilisé.
Valeur de retour
Si aucun rappel n'est fourni, un Buffer
. Si un rappel est fourni, aucun.
// Default: buf contains a PNG-encoded image
const buf = canvas . toBuffer ( )
// PNG-encoded, zlib compression level 3 for faster compression but bigger files, no filtering
const buf2 = canvas . toBuffer ( 'image/png' , { compressionLevel : 3 , filters : canvas . PNG_FILTER_NONE } )
// JPEG-encoded, 50% quality
const buf3 = canvas . toBuffer ( 'image/jpeg' , { quality : 0.5 } )
// Asynchronous PNG
canvas . toBuffer ( ( err , buf ) => {
if ( err ) throw err // encoding failed
// buf is PNG-encoded image
} )
canvas . toBuffer ( ( err , buf ) => {
if ( err ) throw err // encoding failed
// buf is JPEG-encoded image at 95% quality
} , 'image/jpeg' , { quality : 0.95 } )
// BGRA pixel values, native-endian
const buf4 = canvas . toBuffer ( 'raw' )
const { stride , width } = canvas
// In memory, this is `canvas.height * canvas.stride` bytes long.
// The top row of pixels, in BGRA order on little-endian hardware,
// left-to-right, is:
const topPixelsBGRALeftToRight = buf4 . slice ( 0 , width * 4 )
// And the third row is:
const row3 = buf4 . slice ( 2 * stride , 2 * stride + width * 4 )
// SVG and PDF canvases
const myCanvas = createCanvas ( w , h , 'pdf' )
myCanvas . toBuffer ( ) // returns a buffer containing a PDF-encoded canvas
// With optional metadata:
myCanvas . toBuffer ( 'application/pdf' , {
title : 'my picture' ,
keywords : 'node.js demo cairo' ,
creationDate : new Date ( )
} )
canvas . createPNGStream ( config ?: any ) = > ReadableStream
Crée unream ReadableStream
qui émet des données codées par PNG.
config
un objet spécifiant le niveau de compression ZLIB (entre 0 et 9), le (s) filtre (s) de compression, la palette (PNG indexée uniquement) et / ou l'index de la palette d'arrière-plan (PNG indexé uniquement): {compressionLevel: 6, filters: canvas.PNG_ALL_FILTERS, palette: undefined, backgroundIndex: 0, resolution: undefined}
. Toutes les propriétés sont facultatives. const fs = require ( 'fs' )
const out = fs . createWriteStream ( __dirname + '/test.png' )
const stream = canvas . createPNGStream ( )
stream . pipe ( out )
out . on ( 'finish' , ( ) => console . log ( 'The PNG file was created.' ) )
Pour coder les PNG indexés à partir de toiles avec pixelFormat: 'A8'
ou 'A1'
, fournissez un objet Options:
const palette = new Uint8ClampedArray ( [
//r g b a
0 , 50 , 50 , 255 , // index 1
10 , 90 , 90 , 255 , // index 2
127 , 127 , 255 , 255
// ...
] )
canvas . createPNGStream ( {
palette : palette ,
backgroundIndex : 0 // optional, defaults to 0
} )
canvas . createJPEGStream ( config ?: any ) = > ReadableStream
Crée unream ReadableStream
qui émet des données codées par JPEG.
Remarque: Pour le moment, createJPEGStream()
est synchrone sous le capot. Autrement dit, il s'exécute dans le fil principal, pas dans le threadpool Libuv.
config
un objet spécifiant la qualité (0 à 1), si une compression progressive doit être utilisée et / ou si le sous-échantillonnage de chroma doit être utilisé: {quality: 0.75, progressive: false, chromaSubsampling: true}
. Toutes les propriétés sont facultatives. const fs = require ( 'fs' )
const out = fs . createWriteStream ( __dirname + '/test.jpeg' )
const stream = canvas . createJPEGStream ( )
stream . pipe ( out )
out . on ( 'finish' , ( ) => console . log ( 'The JPEG file was created.' ) )
// Disable 2x2 chromaSubsampling for deeper colors and use a higher quality
const stream = canvas . createJPEGStream ( {
quality : 0.95 ,
chromaSubsampling : false
} )
canvas . createPDFStream ( config ?: any ) = > ReadableStream
config
un objet spécifiant les métadonnées de document facultatives: {title: string, author: string, subject: string, keywords: string, creator: string, creationDate: Date, modDate: Date}
. Voir toBuffer()
pour plus d'informations. L'ajout de métadonnées nécessite le Caire 1.16.0 ou version ultérieure. S'applique uniquement aux toiles PDF. Crée unream ReadableStream
qui émet le PDF codé. canvas.toBuffer()
produit également un PDF codé, mais createPDFStream()
peut être utilisé pour réduire l'utilisation de la mémoire.
Il s'agit d'une API standard, mais plusieurs appels non standard sont pris en charge. La liste complète des appels pris en charge est:
dataUrl = canvas . toDataURL ( ) // defaults to PNG
dataUrl = canvas . toDataURL ( 'image/png' )
dataUrl = canvas . toDataURL ( 'image/jpeg' )
dataUrl = canvas . toDataURL ( 'image/jpeg' , quality ) // quality from 0 to 1
canvas . toDataURL ( ( err , png ) => { } ) // defaults to PNG
canvas . toDataURL ( 'image/png' , ( err , png ) => { } )
canvas . toDataURL ( 'image/jpeg' , ( err , jpeg ) => { } ) // sync JPEG is not supported
canvas . toDataURL ( 'image/jpeg' , { ... opts } , ( err , jpeg ) => { } ) // see Canvas#createJPEGStream for valid options
canvas . toDataURL ( 'image/jpeg' , quality , ( err , jpeg ) => { } ) // spec-following; quality from 0 to 1
context . patternQuality : 'fast' | 'good' | 'best' | 'nearest' | 'bilinear'
Par défaut est 'good'
. Affecte le modèle (gradient, image, etc.) la qualité du rendu.
context . quality : 'fast' | 'good' | 'best' | 'nearest' | 'bilinear'
Par défaut est 'good'
. Comme patternQuality
, mais s'applique aux transformations affectant plus que de simples modèles.
context . textDrawingMode : 'path' | 'glyph'
Par défaut est 'path'
. L'effet dépend du type de toile:
glyph
et path
standard (image) entraînent tous deux un texte rastérisé. Le mode glyphe est plus rapide que path
, mais peut entraîner un texte de qualité inférieure, en particulier lorsqu'il est tourné ou traduit.
glyph
PDF intégra le texte au lieu des chemins dans le PDF. Ceci est plus rapide à encoder, plus rapidement à ouvrir avec les visionneuses PDF, donne une taille de fichier plus petite et rend le texte sélectionnable. Le sous-ensemble de la police nécessaire pour rendre les glyphes sera intégré dans le PDF. Il s'agit généralement du mode que vous souhaitez utiliser avec des toiles PDF.
SVG glyph
ne fait pas la production d'éléments <text>
comme on pourrait s'y attendre (Caire Bug). Au contraire, glyph
créera une section <defs>
avec un <symbol>
pour chaque glyphe, puis ces glyphes seront réutilisés via des éléments <use>
. Le mode path
crée un élément <path>
pour chaque chaîne de texte. Le mode glyph
est plus rapide et donne une taille de fichier plus petite.
En mode glyph
, ctx.strokeText()
et ctx.fillText()
se comportent de la même manière (en plus d'utiliser le style de course et de remplissage, respectivement).
Cette propriété est suivie dans le cadre de l'état Canvas dans Save / Restore.
En plus de toutes les opérations composites globales standard définies par la spécification du canevas, l'opération «sature» est également disponible.
context . antialias : 'default' | 'none' | 'gray' | 'subpixel'
Définit le mode anti-aliasing.
Node-Canvas peut créer des documents PDF au lieu d'images. Le type de canevas doit être défini lors de la création du canevas comme suit:
const canvas = createCanvas ( 200 , 500 , 'pdf' )
Une méthode supplémentaire .addPage()
est ensuite disponible pour créer des PDF de plusieurs pages:
// On first page
ctx . font = '22px Helvetica'
ctx . fillText ( 'Hello World' , 50 , 80 )
ctx . addPage ( )
// Now on second page
ctx . font = '22px Helvetica'
ctx . fillText ( 'Hello World 2' , 50 , 80 )
canvas . toBuffer ( ) // returns a PDF file
canvas . createPDFStream ( ) // returns a ReadableStream that emits a PDF
// With optional document metadata (requires Cairo 1.16.0):
canvas . toBuffer ( 'application/pdf' , {
title : 'my picture' ,
keywords : 'node.js demo cairo' ,
creationDate : new Date ( )
} )
Il est également possible de créer des pages avec différentes tailles en passant width
et height
à la méthode .addPage()
:
ctx . font = '22px Helvetica'
ctx . fillText ( 'Hello World' , 50 , 80 )
ctx . addPage ( 400 , 800 )
ctx . fillText ( 'Hello World 2' , 50 , 80 )
Voir aussi:
Node-Canvas peut créer des documents SVG au lieu d'images. Le type de canevas doit être défini lors de la création du canevas comme suit:
const canvas = createCanvas ( 200 , 500 , 'svg' )
// Use the normal primitives.
fs . writeFileSync ( 'out.svg' , canvas . toBuffer ( ) )
Si Librsvg est disponible lorsque Node Canvas est installé, Node-Canvas peut rendre des images SVG dans votre contexte de toile. Cela fonctionne actuellement en rasterisant l'image SVG (ie dessinant une image SVG sur une toile SVG ne préservera pas les données SVG).
const img = new Image ( )
img . onload = ( ) => ctx . drawImage ( img , 0 , 0 )
img . onerror = err => { throw err }
img . src = './example.svg'
Node-Canvas a un support expérimental pour des formats de pixels supplémentaires, à peu près la proposition d'espace colorimétrique sur toile.
const canvas = createCanvas ( 200 , 200 )
const ctx = canvas . getContext ( '2d' , { pixelFormat : 'A8' } )
Par défaut, les toiles sont créées dans le format RGBA32
, qui correspond au comportement de toile HTML natif. Chaque pixel mesure 32 bits. Les API JavaScript qui impliquent des données de pixels ( getImageData
, putImageData
) stockent les couleurs dans l'ordre {rouge, vert, bleu, alpha} sans alpha pré-multiplication. (L'API C ++ stocke les couleurs de l'ordre {alpha, rouge, vert, bleu} dans l'ordre natif-endian, avec pré-multiplication alpha.)
Ces formats de pixels supplémentaires ont un soutien expérimental:
RGB24
comme RGBA32
, mais les 8 bits alpha sont toujours opaques. Ce format est toujours utilisé si l'attribut de contexte alpha
est défini sur false (c'est-à-dire canvas.getContext('2d', {alpha: false})
). Ce format peut être plus rapide que RGBA32
car la transparence n'a pas besoin d'être calculée.A8
Chaque pixel est de 8 bits. Ce format peut être utilisé pour créer des images en niveaux de gris (traitant chaque octet comme une valeur alpha), soit pour créer des PNG indexés (traitant chaque octet comme un index de palette) (voir l'exemple en utilisant des valeurs alpha avec fillStyle
et l'exemple utilisant imageData
).RGB16_565
Chaque pixel est 16 bits, avec du rouge dans les 5 bits supérieurs, du vert au milieu de 6 bits et du bleu dans les 5 bits inférieurs, dans la plate-forme indigène Endanness. Certains périphériques matériels et tampons de trame utilisent ce format. Notez que PNG ne prend pas en charge ce format; Lors de la création d'un PNG, l'image sera convertie en RVB 24 bits. Ce format est donc sous-optimal pour générer des PNG. ImageData
Instances pour ce mode Utilisez un Uint16Array
au lieu d'un Uint8ClampedArray
.A1
Chaque pixel est 1 bits et les pixels sont emballés en quantités 32 bits. L'ordre des bits correspond à l'endianité de la plate-forme: sur une machine peu ende, le premier pixel est le bit le moins significatif. Ce format peut être utilisé pour créer des images monores. La prise en charge de ce format est incomplète, voir la note ci-dessous.RGB30
Chaque pixel est de 30 bits, avec le rouge dans le 10, le vert au milieu 10 et le bleu dans les 10 inférieurs (nécessite le Caire 1.12 ou plus tard.) La prise en charge de ce format est incomplète, voir la note ci-dessous.Notes et mises en garde:
L'utilisation d'un format non défaut peut affecter le comportement des API qui impliquent des données de pixels:
context2d.createImageData
La taille du tableau renvoyé dépend du nombre de bits par pixel pour le format de données d'image sous-jacent, selon les descriptions ci-dessus.context2d.getImageData
Le format du tableau renvoyé dépend du mode d'image sous-jacent, selon les descriptions ci-dessus. Soyez conscient de Platform Endianness, qui peut être déterminé à l'aide de la fonction os.endianness()
de Node.js.context2d.putImageData
comme ci-dessus. A1
et RGB30
ne soutiennent pas encore getImageData
ou putImageData
. Vous avez un cas d'utilisation et / ou une opinion sur le travail avec ces formats? Ouvrez un problème et faites-le nous savoir! (Voir # 935.)
A1
, A8
, RGB30
et RGB16_565
avec des flous d'ombre peuvent s'écraser ou ne pas rendre correctement.
Les constructeurs ImageData(width, height)
et ImageData(Uint8ClampedArray, width)
supposent 4 octets par pixel. Pour créer une instance ImageData
avec un nombre différent d'octets par pixel, utilisez new ImageData(new Uint8ClampedArray(size), width, height)
ou new ImageData(new Uint16ClampedArray(size), width, height)
.
Assurez-vous d'abord que vous avez construit la dernière version. Obtenez tous les DEP dont vous avez besoin (voir compilation ci-dessus) et exécutez:
npm install --build-from-source
Pour les tests visuels: npm run test-server
et pointez votre navigateur sur http: // localhost: 4000.
Pour les tests unitaires: npm run test
.
Les références vivent dans le répertoire benchmarks
.
Ligne d'exemples dans le répertoire examples
. La plupart produisent une image PNG du même nom, et d'autres tels que LiveClock.js lancent un serveur HTTP à afficher dans le navigateur.
(La licence MIT)
Copyright (c) 2010 LearnBoost, et contributeurs <[email protected]>
Copyright (C) 2014 Automattic, Inc et contributeurs <[email protected]>
L'autorisation est accordée gratuitement par la présente à toute personne qui obtient une copie de ce logiciel et des fichiers de documentation associés (le `` logiciel ''), pour traiter le logiciel sans restriction, y compris sans limiter les droits d'utilisation, de copier, de modifier, de fusionner , publier, distribuer, sous-licencier et / ou vendre des copies du logiciel et permettre aux personnes à qui le logiciel est fourni pour le faire, sous réserve des conditions suivantes:
L'avis de droit d'auteur ci-dessus et le présent avis d'autorisation sont inclus dans toutes les copies ou des parties substantielles du logiciel.
Le logiciel est fourni «tel quel», sans garantie d'aucune sorte, express ou implicite, y compris, mais sans s'y limiter, les garanties de qualité marchande, d'adéquation à un usage particulier et de non-contrefaçon. En aucun cas, les auteurs ou les titulaires de droits d'auteur ne seront pas responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action de contrat, de délit ou autre, découlant de, hors du logiciel ou de l'utilisation ou d'autres transactions dans le LOGICIEL.
Voir la licence