node canvas
v2.11.2
Node-Canvas เป็นการใช้งานผ้าใบที่ได้รับการสนับสนุนจากกรุงไคโรสำหรับ Node.Js.
เคล็ดลับ
V3.0.0-RC2 พร้อมใช้งานสำหรับการทดสอบบน Linux (X64 GLIBC), MacOS (x64) และ Windows (x64)! เป็นเวอร์ชันแรกที่ใช้ N-API และ Prebuild-Install โปรดลองและแจ้งให้เราทราบหากคุณพบปัญหาใด ๆ
npm install canvas@next$ npm install canvasโดยค่าเริ่มต้นไบนารีที่สร้างไว้ล่วงหน้าจะถูกดาวน์โหลดหากคุณใช้หนึ่งในแพลตฟอร์มต่อไปนี้:
หากคุณต้องการสร้างจากแหล่งที่มาให้ใช้ npm install --build-from-source และดูส่วน รวบรวม ด้านล่าง
เวอร์ชันขั้นต่ำของ node.js ที่ต้องการคือ 18.12.0
หากคุณไม่มีระบบปฏิบัติการหรือสถาปัตยกรรมโปรเซสเซอร์หรือคุณใช้ --build-from-source โมดูลจะถูกรวบรวมในระบบของคุณ สิ่งนี้ต้องใช้การพึ่งพาหลายอย่างรวมถึงไคโรและ Pango
สำหรับข้อมูลการติดตั้งโดยละเอียดดูวิกิ คำแนะนำการติดตั้งแบบบรรทัดเดียวสำหรับ OSE ทั่วไปอยู่ด้านล่าง โปรดทราบว่า libgif/giflib, librsvg และ libjpeg เป็นทางเลือกและจำเป็นเฉพาะเมื่อคุณต้องการการสนับสนุน GIF, SVG และ JPEG ตามลำดับ จำเป็นต้องมี Cairo v1.10.0 หรือใหม่กว่า
| ระบบปฏิบัติการ | สั่งการ |
|---|---|
| แม็กอส | ใช้ 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 |
| ฟีดอร่า | sudo yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel |
| โซลาริส | pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto |
| OpenBSD | doas pkg_add cairo pango png jpeg giflib |
| หน้าต่าง | ดูวิกิ |
| คนอื่น | ดูวิกิ |
Mac OS X V10.11+: หากคุณเพิ่งอัปเดตเป็น Mac OS X V10.11+ และกำลังประสบปัญหาเมื่อรวบรวมให้เรียกใช้คำสั่งต่อไปนี้: xcode-select --install อ่านเพิ่มเติมเกี่ยวกับปัญหาเกี่ยวกับสแต็คล้น หากคุณติดตั้ง XCode 10.0 หรือสูงกว่าเพื่อสร้างจากแหล่งที่มาคุณต้องมี NPM 6.4.1 หรือสูงกว่า
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 ( ) + '" />' )
} ) ดูการเปลี่ยนแปลงสำหรับคำแนะนำในการอัพเกรดจาก 1.x เป็น 2.x
สำหรับเอกสารเวอร์ชัน 1.x โปรดดูสาขา V1.X
โครงการนี้เป็นการใช้งานของเว็บ Canvas API และใช้ API อย่างใกล้ชิดที่สุด สำหรับเอกสาร API กรุณาเยี่ยมชม Mozilla Web Canvas API (ดูสถานะความเข้ากันได้สำหรับการปฏิบัติตาม API ปัจจุบัน) วิธีการยูทิลิตี้ทั้งหมดและ API ที่ไม่ได้มาตรฐานมีการบันทึกไว้ด้านล่าง
createCanvas ( width : number , height : number , type ?: 'PDF' | 'SVG' ) = > Canvas
สร้างอินสแตนซ์ผ้าใบ วิธีนี้ใช้งานได้ทั้งใน Node.js และเว็บเบราว์เซอร์ที่ไม่มีตัวสร้างผืนผ้าใบ (ดู browser.js สำหรับการใช้งานที่ทำงานในเบราว์เซอร์)
const { createCanvas } = require ( 'canvas' )
const mycanvas = createCanvas ( 200 , 200 )
const myPDFcanvas = createCanvas ( 600 , 800 , 'pdf' ) // see "PDF Support" sectioncreateImageData ( 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
สร้างอินสแตนซ์ Imagedata วิธีนี้ใช้งานได้ทั้งใน Node.js และเว็บเบราว์เซอร์
const { createImageData } = require ( 'canvas' )
const width = 20 , height = 20
const arraySize = width * height * 4
const mydata = createImageData ( new Uint8ClampedArray ( arraySize ) , width )loadImage ( ) = > Promise < Image >
วิธีการสะดวกสำหรับการโหลดภาพ วิธีนี้ใช้งานได้ทั้งใน Node.js และเว็บเบราว์เซอร์
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 imageregisterFont ( path : string , { family : string , weight ?: string , style ?: string } ) = > void
หากต้องการใช้ไฟล์ตัวอักษรที่ไม่ได้ติดตั้งเป็นตัวอักษรของระบบให้ใช้ registerFont() เพื่อลงทะเบียนแบบอักษรด้วยผ้าใบ จะต้องทำก่อนที่จะสร้างผืนผ้าใบ
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 ) อาร์กิวเมนต์ที่สองเป็นวัตถุที่มีคุณสมบัติที่มีลักษณะคล้ายกับคุณสมบัติ CSS ที่ระบุไว้ในกฎ @font-face คุณต้องระบุ family อย่างน้อย weight และ style เป็นทางเลือกและเริ่มต้นเป็น 'normal'
deregisterAllFonts ( ) = > void
ใช้ deregisterAllFonts เพื่อยกเลิกการลงทะเบียนแบบอักษรทั้งหมดที่ได้รับการลงทะเบียนก่อนหน้านี้ วิธีนี้มีประโยชน์เมื่อคุณต้องการลบแบบอักษรที่ลงทะเบียนทั้งหมดเช่นเมื่อใช้ผ้าใบในการทดสอบ
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
เช่นเดียวกับในเบราว์เซอร์ img.src สามารถตั้งค่าเป็น data: URI หรือ URL ระยะไกล นอกจากนี้ Node-Canvas ยังอนุญาตให้ตั้ง src ไปยังเส้นทางไฟล์ท้องถิ่นหรือ 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 หมายเหตุ: ในบางกรณี img.src= ปัจจุบันซิงโครนัส อย่างไรก็ตามคุณควรใช้ img.onload และ img.onerror เสมอในขณะที่เราตั้งใจจะทำให้ img.src= แบบอะซิงโครนัสเสมอเหมือนในเบราว์เซอร์ ดู #1007
img . dataMode : number
ใช้กับภาพ JPEG ที่วาดไปยังผืนผ้าใบ PDF เท่านั้น
การตั้งค่า img.dataMode = Image.MODE_MIME หรือ Image.MODE_MIME|Image.MODE_IMAGE เปิดใช้งานการติดตามข้อมูล MIME ของภาพ เมื่อมีการติดตามข้อมูล MIME PDF Canvases สามารถฝัง JPEGs ลงในเอาต์พุตโดยตรงแทนที่จะเข้ารหัสเข้าสู่ PNG อีกครั้ง สิ่งนี้สามารถลดขนาดไฟล์และเพิ่มความเร็วในการแสดงผลได้อย่างมาก
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หากทำงานกับผืนผ้าใบที่ไม่ใช่ PDF ต้อง ติดตามข้อมูลรูปภาพ มิฉะนั้นผลลัพธ์จะเป็นขยะ
การเปิดใช้งานการติดตามข้อมูล MIME ไม่มีประโยชน์ (ช้าลงเท่านั้น) เว้นแต่คุณจะสร้าง PDF
canvas . toBuffer ( ( err : Error | null , result : Buffer ) => void , mimeType ?: string , config ?: any ) = > void canvas . toBuffer ( mimeType ?: string , config ?: any ) = > Buffer
สร้างวัตถุ Buffer ที่แสดงภาพที่มีอยู่ในผืนผ้าใบ
raw หรือ PDF หรือ SVG Canvasesimage/png , image/jpeg (ถ้า Node-Canvas ถูกสร้างขึ้นด้วยการสนับสนุน JPEG), raw (ข้อมูลที่ไม่ได้เข้ารหัสในลำดับ BGRA ในระบบ Little-Endian (ส่วนใหญ่), Argb บนระบบใหญ่-เอนด์; ), application/pdf (สำหรับผืนผ้าใบ PDF) และ image/svg+xml (สำหรับ SVG Canvases) ค่าเริ่มต้นไปยัง image/png สำหรับผืนผ้าใบรูปภาพหรือประเภทที่สอดคล้องกันสำหรับ PDF หรือ SVG Canvas สำหรับ image/jpeg วัตถุที่ระบุคุณภาพ (0 ถึง 1) หากควรใช้การบีบอัดแบบก้าวหน้าและ/หรือหากการสุ่มของ Chroma ควรใช้: {quality: 0.75, progressive: false, chromaSubsampling: true} คุณสมบัติทั้งหมดเป็นทางเลือก
สำหรับ image/png วัตถุที่ระบุระดับการบีบอัด zLIB (ระหว่าง 0 ถึง 9) ตัวกรองการบีบอัด (S), จานสี (ดัชนี PNGS เท่านั้น), ดัชนีพื้นหลัง (ดัชนี PNGs เท่านั้น) และ/หรือความละเอียด ( PPI): {compressionLevel: 6, filters: canvas.PNG_ALL_FILTERS, palette: undefined, backgroundIndex: 0, resolution: undefined} คุณสมบัติทั้งหมดเป็นทางเลือก
โปรดทราบว่ารูปแบบ PNG เข้ารหัสความละเอียดเป็นพิกเซลต่อเมตรดังนั้นหากคุณระบุ 96 ไฟล์จะเข้ารหัส 3780 ppm (~ 96.01 PPI) ความละเอียดจะไม่ได้กำหนดโดยค่าเริ่มต้นเพื่อให้ตรงกับพฤติกรรมของเบราว์เซอร์ทั่วไป
สำหรับ application/pdf วัตถุที่ระบุข้อมูลเมตาดาต้าเอกสารทางเลือก: {title: string, author: string, subject: string, keywords: string, creator: string, creationDate: Date, modDate: Date} คุณสมบัติทั้งหมดเป็นทางเลือกและเริ่มต้น undefined ยกเว้นสำหรับ creationDate ซึ่งเริ่มต้นเป็นวันที่ปัจจุบัน การเพิ่มข้อมูลเมตาต้องใช้ไคโร 1.16.0 หรือใหม่กว่า
สำหรับคำอธิบายของคุณสมบัติเหล่านี้ดูหน้า 550 ของ PDF 32000-1: 2008
โปรดทราบว่าไม่มีตัวคั่นมาตรฐานสำหรับ keywords แนะนำให้ใช้พื้นที่เนื่องจากการใช้งานทั่วไปโดยแอปพลิเคชันอื่น ๆ และกรุงไคโรจะแนบรายการคำหลักในเครื่องหมายคำพูดหากใช้เครื่องหมายจุลภาคหรือเครื่องหมายอัฒภาค
ค่าส่งคืน
หากไม่มีการโทรกลับ Buffer หากมีการโทรกลับไม่มี
// 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
สร้าง ReadableStream ที่ปล่อยข้อมูลที่เข้ารหัส PNG
config วัตถุที่ระบุระดับการบีบอัด zLIB (ระหว่าง 0 และ 9) ตัวกรองการบีบอัด (S) จานสี (PNGS ที่จัดทำดัชนีเท่านั้น) และ/หรือดัชนีพื้นหลัง (ดัชนี PNGS ที่จัดทำดัชนีเท่านั้น): {compressionLevel: 6, filters: canvas.PNG_ALL_FILTERS, palette: undefined, backgroundIndex: 0, resolution: undefined} คุณสมบัติทั้งหมดเป็นทางเลือก 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.' ) ) ในการเข้ารหัส PNGs ที่จัดทำดัชนีจาก Canvases ด้วย pixelFormat: 'A8' หรือ 'A1' ให้วัตถุตัวเลือก:
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
สร้าง ReadableStream ที่ปล่อยข้อมูลที่เข้ารหัส JPEG
หมายเหตุ: ในขณะนี้ createJPEGStream() เป็นแบบซิงโครนัสภายใต้ประทุน นั่นคือมันทำงานในเธรดหลักไม่ใช่ใน libuv threadpool
config วัตถุที่ระบุคุณภาพ (0 ถึง 1) หากควรใช้การบีบอัดแบบก้าวหน้าและ/หรือถ้าควรใช้การย่อย Chroma: {quality: 0.75, progressive: false, chromaSubsampling: true} คุณสมบัติทั้งหมดเป็นทางเลือก 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 วัตถุที่ระบุ metadata เอกสารเสริม: {title: string, author: string, subject: string, keywords: string, creator: string, creationDate: Date, modDate: Date} ดู toBuffer() สำหรับข้อมูลเพิ่มเติม การเพิ่มข้อมูลเมตาต้องใช้ไคโร 1.16.0 หรือใหม่กว่า ใช้กับผืนผ้าใบ PDF เท่านั้น สร้าง ReadableStream ที่ปล่อย PDF ที่เข้ารหัส canvas.toBuffer() ยังผลิต PDF ที่เข้ารหัส แต่ createPDFStream() สามารถใช้เพื่อลดการใช้หน่วยความจำ
นี่คือ API มาตรฐาน แต่รองรับการโทรที่ไม่ได้มาตรฐานหลายรายการ รายการการโทรที่รองรับทั้งหมดคือ:
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 1context . patternQuality : 'fast' | 'good' | 'best' | 'nearest' | 'bilinear'
ค่าเริ่มต้นเป็น 'good' ส่งผลกระทบต่อรูปแบบ (การไล่ระดับสี, ภาพ, ฯลฯ ) คุณภาพการแสดงผล
context . quality : 'fast' | 'good' | 'best' | 'nearest' | 'bilinear'
ค่าเริ่มต้นเป็น 'good' เช่น patternQuality แต่นำไปใช้กับการเปลี่ยนแปลงที่มีผลมากกว่าแค่รูปแบบ
context . textDrawingMode : 'path' | 'glyph'
ค่าเริ่มต้นเป็น 'path' เอฟเฟกต์ขึ้นอยู่กับประเภทผ้าใบ:
มาตรฐาน (ภาพ) glyph และ path ทั้งสองส่งผลให้ข้อความที่แรสเตอร์ โหมด Glyph เร็วกว่า path แต่อาจส่งผลให้ข้อความคุณภาพต่ำโดยเฉพาะอย่างยิ่งเมื่อหมุนหรือแปล
PDF glyph จะฝังข้อความแทนเส้นทางเข้าสู่ PDF สิ่งนี้เร็วขึ้นในการเข้ารหัสเร็วขึ้นในการเปิดด้วยผู้ชม PDF ให้ขนาดไฟล์ที่เล็กลงและทำให้ข้อความเลือกได้ ชุดย่อยของแบบอักษรที่จำเป็นในการแสดงร่ายมนตร์จะถูกฝังอยู่ใน PDF นี่เป็นโหมดที่คุณต้องการใช้กับผืนผ้าใบ PDF
SVG glyph ไม่ได้ ทำให้องค์ประกอบ <text> ที่จะผลิตตามที่คาดหวัง (Cairo Bug) ค่อนข้าง glyph จะสร้างส่วน <defs> ด้วย <symbol> สำหรับแต่ละ glyph จากนั้น glyphs เหล่านั้นจะถูกนำกลับมาใช้ใหม่ผ่านองค์ประกอบ <use> โหมด path สร้างองค์ประกอบ <path> สำหรับแต่ละสตริงข้อความ โหมด glyph เร็วขึ้นและให้ขนาดไฟล์ที่เล็กลง
ในโหมด glyph , ctx.strokeText() และ ctx.fillText() ประพฤติตนเหมือนกัน (นอกเหนือจากการใช้ Stroke and Fill Style ตามลำดับ)
คุณสมบัตินี้ถูกติดตามเป็นส่วนหนึ่งของสถานะผืนผ้าใบในบันทึก/กู้คืน
นอกเหนือจากการดำเนินการคอมโพสิตทั่วโลกมาตรฐานทั้งหมดที่กำหนดโดยข้อกำหนดของผืนผ้าใบแล้วยังมีการดำเนินการ 'saturate'
context . antialias : 'default' | 'none' | 'gray' | 'subpixel'
ตั้งค่าโหมดต่อต้านนามแฝง
Node-Canvas สามารถสร้างเอกสาร PDF แทนรูปภาพ ต้องตั้งค่าประเภทผ้าใบเมื่อสร้างผืนผ้าใบดังนี้:
const canvas = createCanvas ( 200 , 500 , 'pdf' ) จากนั้นวิธีการเพิ่มเติม .addPage() จะพร้อมใช้งานเพื่อสร้าง PDF หลายหน้า:
// 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 ( )
} ) นอกจากนี้ยังเป็นไปได้ที่จะสร้างหน้าเว็บที่มีขนาดแตกต่างกันโดยผ่าน width และ height ไปยังวิธี. .addPage() :
ctx . font = '22px Helvetica'
ctx . fillText ( 'Hello World' , 50 , 80 )
ctx . addPage ( 400 , 800 )
ctx . fillText ( 'Hello World 2' , 50 , 80 )ดูเพิ่มเติม:
Node-Canvas สามารถสร้างเอกสาร SVG แทนรูปภาพ ต้องตั้งค่าประเภทผ้าใบเมื่อสร้างผืนผ้าใบดังนี้:
const canvas = createCanvas ( 200 , 500 , 'svg' )
// Use the normal primitives.
fs . writeFileSync ( 'out.svg' , canvas . toBuffer ( ) ) หาก Liblsvg พร้อมใช้งานเมื่อติดตั้ง Node-Canvas Node-Canvas สามารถแสดงภาพ SVG ไปยังบริบทของ Canvas ของคุณ ในปัจจุบันนี้ใช้งานได้โดยการทำให้ภาพ SVG (เช่นการวาดภาพ SVG ไปยังผืนผ้าใบ SVG จะไม่เก็บข้อมูล SVG ไว้)
const img = new Image ( )
img . onload = ( ) => ctx . drawImage ( img , 0 , 0 )
img . onerror = err => { throw err }
img . src = './example.svg' Node-Canvas มีการสนับสนุนการทดลองสำหรับรูปแบบพิกเซลเพิ่มเติมโดยประมาณตามข้อเสนอพื้นที่สี Canvas
const canvas = createCanvas ( 200 , 200 )
const ctx = canvas . getContext ( '2d' , { pixelFormat : 'A8' } ) โดยค่าเริ่มต้นผ้าใบถูกสร้างขึ้นในรูปแบบ RGBA32 ซึ่งสอดคล้องกับพฤติกรรม HTML Canvas ดั้งเดิม แต่ละพิกเซลคือ 32 บิต JavaScript APIs ที่เกี่ยวข้องกับข้อมูลพิกเซล ( getImageData , putImageData ) เก็บสีตามลำดับ {สีแดง, เขียว, สีน้ำเงิน, อัลฟ่า} โดยไม่มีอัลฟ่าล่วงหน้า (C ++ API เก็บสีตามลำดับ {alpha, สีแดง, สีเขียว, สีน้ำเงิน} ในการสั่งซื้อพื้นเมือง-เอดินโดยมีอัลฟ่า pre-multiplication)
รูปแบบพิกเซลเพิ่มเติมเหล่านี้มีการสนับสนุนการทดลอง:
RGB24 เช่น RGBA32 แต่ 8 บิตอัลฟ่านั้นทึบแสงเสมอ รูปแบบนี้จะใช้เสมอหากแอตทริบิวต์บริบท alpha ถูกตั้งค่าเป็นเท็จ (เช่น canvas.getContext('2d', {alpha: false}) ) รูปแบบนี้สามารถเร็วกว่า RGBA32 เนื่องจากไม่จำเป็นต้องคำนวณความโปร่งใสA8 แต่ละพิกเซลคือ 8 บิต รูปแบบนี้สามารถใช้สำหรับการสร้างภาพสีเทา (การรักษาแต่ละไบต์เป็นค่าอัลฟ่า) หรือสำหรับการสร้าง PNGs ที่จัดทำดัชนี (การรักษาแต่ละไบต์เป็นดัชนีจานสี) (ดูตัวอย่างโดยใช้ค่าอัลฟ่าด้วย fillStyle และตัวอย่างโดยใช้ imageData )RGB16_565 แต่ละพิกเซลมี 16 บิตมีสีแดงใน 5 บิตบนสีเขียวในช่วงกลาง 6 บิตและสีน้ำเงินใน 5 บิตล่างในแพลตฟอร์มพื้นเมืองเอนเดียนเนสต์ อุปกรณ์ฮาร์ดแวร์และบัฟเฟอร์เฟรมบางอย่างใช้รูปแบบนี้ โปรดทราบว่า PNG ไม่รองรับรูปแบบนี้ เมื่อสร้าง PNG ภาพจะถูกแปลงเป็น RGB 24 บิต รูปแบบนี้เป็นสิ่งที่ไม่ดีสำหรับการสร้าง PNGs อินสแตนซ์ ImageData สำหรับโหมดนี้ใช้ Uint16Array แทน Uint8ClampedArrayA1 แต่ละพิกเซลคือ 1 บิตและพิกเซลจะถูกรวมเข้าด้วยกันในปริมาณ 32 บิต การสั่งซื้อบิตตรงกับ endianness ของแพลตฟอร์ม: บนเครื่องจักรเล็ก ๆ น้อย ๆ พิกเซลแรกเป็นบิตที่สำคัญน้อยที่สุด รูปแบบนี้สามารถใช้สำหรับการสร้างภาพสีเดียว การสนับสนุนสำหรับรูปแบบนี้ไม่สมบูรณ์ดูหมายเหตุด้านล่างRGB30 แต่ละพิกเซลคือ 30 บิตที่มีสีแดงใน 10 บนสีเขียวในกลาง 10 และสีน้ำเงินใน 10 ล่าง (ต้องใช้ไคโร 1.12 หรือใหม่กว่า) การสนับสนุนสำหรับรูปแบบนี้ไม่สมบูรณ์ดูหมายเหตุด้านล่างหมายเหตุและคำเตือน:
การใช้รูปแบบที่ไม่ได้รับการป้องกันอาจส่งผลกระทบต่อพฤติกรรมของ API ที่เกี่ยวข้องกับข้อมูลพิกเซล:
context2d.createImageData ขนาดของอาร์เรย์ที่ส่งคืนขึ้นอยู่กับจำนวนบิตต่อพิกเซลสำหรับรูปแบบข้อมูลภาพพื้นฐานตามคำอธิบายข้างต้นcontext2d.getImageData รูปแบบของอาร์เรย์ที่ส่งคืนขึ้นอยู่กับโหมดอิมเมจพื้นฐานตามคำอธิบายข้างต้น ระวังการใช้แพลตฟอร์ม endianness ซึ่งสามารถกำหนดได้โดยใช้ฟังก์ชัน os.endianness() ของ node.jscontext2d.putImageData ดังกล่าวข้างต้น A1 และ RGB30 ยังไม่สนับสนุน getImageData หรือ putImageData มีกรณีการใช้งานและ/หรือความคิดเห็นเกี่ยวกับการทำงานกับรูปแบบเหล่านี้หรือไม่? เปิดปัญหาและแจ้งให้เราทราบ! (ดู #935.)
A1 , A8 , RGB30 และ RGB16_565 ที่มี Shadow Blurs อาจชนหรือไม่แสดงผลอย่างถูกต้อง
ImageData(width, height) และ ImageData(Uint8ClampedArray, width) ตัวสร้างสมมติ 4 ไบต์ต่อพิกเซล ในการสร้างอินสแตนซ์ ImageData ที่มีจำนวนไบต์ต่อพิกเซลจำนวนมากให้ใช้ new ImageData(new Uint8ClampedArray(size), width, height) หรือ new ImageData(new Uint16ClampedArray(size), width, height)
ก่อนอื่นให้แน่ใจว่าคุณได้สร้างเวอร์ชันล่าสุด รับ deps ทั้งหมดที่คุณต้องการ (ดูการรวบรวมด้านบน) และเรียกใช้:
npm install --build-from-source
สำหรับการทดสอบด้วยภาพ: npm run test-server และชี้เบราว์เซอร์ของคุณไปที่ http: // localhost: 4000
สำหรับการทดสอบหน่วย: npm run test
มาตรฐานอาศัยอยู่ในไดเรกทอรี benchmarks
ตัวอย่างบรรทัดในไดเรกทอรี examples ส่วนใหญ่ผลิตภาพ PNG ที่มีชื่อเดียวกันและอื่น ๆ เช่น live-clock.js เปิดใช้งานเซิร์ฟเวอร์ HTTP ที่จะดูในเบราว์เซอร์
(ใบอนุญาต MIT)
ลิขสิทธิ์ (c) 2010 LearnBoost และผู้สนับสนุน <[email protected]>
ลิขสิทธิ์ (c) 2014 Automattic, Inc และผู้สนับสนุน <dev@@automattic.com>
ได้รับอนุญาตโดยไม่เสียค่าใช้จ่ายสำหรับบุคคลใด ๆ ที่ได้รับสำเนาซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ('ซอฟต์แวร์') เพื่อจัดการในซอฟต์แวร์โดยไม่มีการ จำกัด รวมถึง แต่ไม่ จำกัด เฉพาะสิทธิ์ในการใช้คัดลอกแก้ไขผสาน เผยแพร่แจกจ่าย sublicense และ/หรือขายสำเนาของซอฟต์แวร์และอนุญาตให้บุคคลที่ซอฟต์แวร์ได้รับการตกแต่งให้ทำเช่นนั้นภายใต้เงื่อนไขดังต่อไปนี้:
ประกาศลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์มีให้ 'ตามที่เป็นอยู่' โดยไม่มีการรับประกันใด ๆ ไม่ว่าโดยชัดแจ้งหรือโดยนัยรวมถึง แต่ไม่ จำกัด เพียงการรับประกันความสามารถในการค้าการออกกำลังกายเพื่อวัตถุประสงค์เฉพาะและการไม่เข้าร่วม ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดชอบต่อการเรียกร้องความเสียหายหรือความรับผิดอื่น ๆ ไม่ว่าจะเป็นการกระทำของสัญญาการละเมิดหรืออื่น ๆ ซอฟต์แวร์.
ดูใบอนุญาต
