Estoy usando MacOS para probarlo. Tengo giflib instalado en mi mac según la documentación mencionada en Canvas NPM Package .
Puedo enviar imágenes perfectamente con canvas, pero no puedo enviar archivos GIF al navegador usando Canvas. Tampoco hay registros de errores.
Aquí está mi código:
app.get('/media', function(req, res) { const { createCanvas, loadImage, giflib } = require('canvas') const canvas = createCanvas(600, 400) const ctx = canvas.getContext('2d') const imagePath = loadImage('https://via.placeholder.com/200x200.png') const gifPath = loadImage('https://www.hubspot.com/hubfs/Smiling%20Leo%20Perfect%20GIF.gif') gifPath.then((image) => { // do something with image canvas.toBuffer((err2, buf) => { if (err2) { console.log("To Buffer Error>>>>>>", err2) } else { res.writeHead(200, {'Content-Type': 'image/gif'}); res.end(buf, 'binary'); } }, 'image/gif', { quality: 0.95 }) }).catch(err => { console.log('oh no!', err) }) }) El código funciona si uso imagePath y mimeType como image/png .
¿Podría alguien señalarme en la dirección correcta?
Creo que no puedes manejar el gif animado con un solo lienzo. deberías
cree un lienzo animado como se describe en https://stackoverflow.com/a/10180164/11009351 si desea modificar la imagen
o simplemente escriba la imagen como un flujo de bytes de la siguiente manera
const http = require("http"); const express = require("express"); const request = require("request"); const app = express(); const server = http.createServer(app); server.listen(8080); app.get("/media", function (req, res) { const x = request( "https://www.hubspot.com/hubfs/Smiling%20Leo%20Perfect%20GIF.gif" ); x.pipe(res); });