Dodaj obraz jako ramkę do gif

Question

Więc chcę stworzyć gif i dodać obraz jako ramkę. Używam gifencodera. Widziałem przykłady i dość łatwo dodawać kolory, txt itp., Ale nie mogłem dowiedzieć się, jak zrobić to samo z obrazem. Czy potrzebuję czegoś takiego jak strumień plików png.

ex: ze strony internetowej na ramie koloru

let canvas = new Canvas(width, height); 
var ctx = canvas.getContext('2d'); 
red rectangle 
ctx.fillStyle = '#ff0000'; 
ctx.fillRect(0, 0, 320, 240); 
encoder.addFrame(ctx); 

Edit:

Próbowałem robić coś jak poniżej, natomiast ramki pojawiają się na moim dzienniku, jak chciał ramki nie dostać dodał, żadnych błędów . Zanim ktoś zaproponuje, aby przekonwertować na base64 png/gif, ten moduł nie może dodawać takich ramek, co jest powiedziane, jeśli masz na myśli inne zdanie, proszę, powiedz to.

fs.createReadStream('test.gif') 
.pipe(new GIFDecoder) //gif-stream 
.pipe(concat(function(frames) { //concat-frames 
    console.log(frames); 
    for (var i=0; i<frames.length; i++) { 
     encoder.addFrame(frames[i]); 
    } 
})); 

cokolwiek próbowałem w najlepszym razie dostaję tylko czarny gif, nic więcej.

Edit 2:

Dobrze więc powód Próbuję dodać od od gif ramkę, ponieważ to po prostu wydawało się łatwiejsze. Poniżej znajduje się postęp, który próbowałem zrobić, aby uzyskać obraz, przekonwertować go do RGBA (zauważyłem, że moduł akceptuje format rgba, nie rgb, być może dlatego był zawsze czarny), a następnie dodać ramkę. Dodanie ramki, jeśli mam dane, jest niezwykle łatwe, ponieważ po prostu wywołuję metodę i wprowadzam dane, więc zamierzam to pominąć.

var request = require('request').defaults({ encoding: null }); 

request.get('https://upload.wikimedia.org/wikipedia/commons/0/01/Quinlingpandabearr.jpg', function (error, response, body) { 
    if (!error && response.statusCode == 200) { 
     var img = new Canvas(105, 159);   
     var context = img.getContext('2d'); 
     img.src = "data:" + response.headers["content-type"] + ";base64," + new Buffer(body).toString('base64'); 
     var img_to_rgba = context.getImageData(0, 0, img.width, img.height); 
     console.log(img_to_rgba); //always returns 0, like my pic is completely black, its not. 
    } 
}); 

Answer 1

Dodałem obraz jako ramki do gif, wzdłuż boku niebieski kwadrat.

Oto pełny kod, przetestowany i działa dobrze dla mnie:

var GIFEncoder = require('gifencoder'); 
var Canvas = require('canvas'); 
var fs = require('fs'); 

var encoder = new GIFEncoder(320, 240); 

encoder.createReadStream().pipe(fs.createWriteStream('myanimated.gif')); 

encoder.start(); 
encoder.setRepeat(0); 
encoder.setDelay(500); 
encoder.setQuality(10); 

var canvas = new Canvas(320, 240); 
var ctx = canvas.getContext('2d'); 

// blue rectangle frame 
ctx.fillStyle = '#0000ff'; 
ctx.fillRect(0, 0, 320, 240); 
encoder.addFrame(ctx); 

// image frame 
var data = fs.readFileSync(__dirname + '/image.jpg'); 
var img = new Canvas.Image; 
img.src = data; 
ctx.drawImage(img, 0, 0, 320, 240); 
encoder.addFrame(ctx); 

encoder.finish(); 

Zauważ, że używam readFileSync ten czas, ale można użyć readfile zbyt jak w innych moich odpowiedzi, w zależności od kodu . Zmieniłem również rozmiar załadowanego obrazu, aby dopasować go do kwadratu.

Answer 2

Można załadować obraz na płótnie z fs.readFile:

fs.readFile(__dirname + '/image.jpg', function(err, data) { 
    if (err) throw err; 
    var img = new canvas.Image; 
    img.src = data; 
    ctx.drawImage(img, 0, 0, img.width, img.height); 
})