Comments (7)
There isn't any reason that this shouldn't work. Can you show some code?
from jsgif.
Hello @forresto I am also getting this problem. It seems like it doesn't like converting images in the canvas into part of the gif. Please take a look at my code and assist if you can, I'd really appreciate that, cheers :)
var canvas = document.getElementById('bitmap');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0,0,canvas.width, canvas.height); //GIF can't do transparent so do white
var encoder = new GIFEncoder();
encoder.setRepeat(0); //auto-loop
encoder.setDelay(500);
console.log(encoder.start());
context.fillStyle = "rgb(200,0,0)";
context.fillRect (0, 0,canvas.width, canvas.height);
console.log(encoder.addFrame(context));
context.fillStyle = "rgb(20,0,200)";
context.fillRect (0, 0,canvas.width, canvas.height);
console.log(encoder.addFrame(context));
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0,canvas.width, canvas.height);
}
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png";
console.log(encoder.addFrame(context));
encoder.finish();
document.getElementById('image').src = 'data:image/gif;base64,'+encode64(encoder.stream().getData())
from jsgif.
That's probably a cross origin permissions issue. Try serving up the image from the same domain.
from jsgif.
Hi @antimatter15 , I've updated this so it is from the same domain and still no luck unfortunately. The image shows in the canvas but not in the gif.
from jsgif.
In your code img.onload
is going to fire after the rest of your code runs. Try:
...
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0,canvas.width, canvas.height);
encoder.addFrame(context);
encoder.finish();
}
img.src = "280px-PNG_transparency_demonstration_1.png";
from jsgif.
@antimatter15 @forresto I really apprecitate the help, not sure what I'm doing wrong but I'd like to get it so the image becomes part of the animation like the coloured rectangles are. This is the test page my code is on, http://www.anythoughts.net/gifgo/jsgif-master/Demos/test.html
from jsgif.
I had issues loading images, so I decided to use a Promise to ensure the image was loaded:
async function loadImage(url) {
let img = new Image();
await new Promise((r) => (img.onload = r), (img.src = url));
return img;
}
const encode = (img) => {
encoder.start();
context.drawImage(img, 0, 0, canvas.width, canvas.height);
encoder.addFrame(context);
encoder.finish();
document.getElementById("image").src =
"data:image/gif;base64," + encode64(encoder.stream().getData());
};
loadImage("280px-PNG_transparency_demonstration_1.png").then(encode);
from jsgif.
Related Issues (20)
- License? HOT 2
- The encoding of the Gif fails depending on the size of the canvas HOT 1
- No license information HOT 1
- `addFrame` with `is_imageData=true` makes Chrome hang up HOT 3
- Writing canvas to GIF outputs double speed GIF HOT 1
- License HOT 1
- last frame of addFrame is not added to gif HOT 1
- Data URI generates a black gif HOT 4
- jsapng? can you make convas into animated PNG? HOT 5
- GIF almost empty HOT 4
- Animated Gif comes out black w/ Web Workers HOT 6
- Pixel width black line on left edge of GIF
- Add git tag
- My webcam snapshot is being overlay by the gif ??
- No plugin.xml file
- Color Reproduction Issue HOT 2
- Fixes report HOT 1
- Global color map HOT 2
- Crashes at 300+ Frames HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsgif.