मैं एक ऐसी वेबसाइट विकसित कर रहा हूं जहां एक पारदर्शी एनिमेटेड gif (अक्सर giphy से) के लिए एक लिंक प्रदान करना संभव है और एनिमेटेड gif की पारदर्शिता रखते हुए मैं इसे कैनवास पर (एनिमेटेड) प्रस्तुत करना चाहता हूं। यह GIF की एनीमेशन गति को बदलने में सक्षम होने के लिए।
मैंने निम्नलिखित का उपयोग करने की कोशिश की है:
fastgifलेकिन तीस में से केवल एक फ्रेम एक छवि दिखाता है, बाकी पूरी तरह से पारदर्शी हैं। पारदर्शिता के बिना GIF काम करता है।gifuct-jsलेकिन बैकग्राउंड काला है और पारदर्शी नहीं है। मैं समझ गया कि उपहार एक पारदर्शिता सूचकांक प्रदान करता है लेकिन यह gif को डिकोड करते समय दिखाई नहीं देता है।
मैंने कई अलग-अलग जीआईएफ की कोशिश की है, जिनमें फ़ोटोशॉप और आफ्टर इफेक्ट्स के साथ बनाए गए गिफी से नहीं हैं, लेकिन कोई परिणाम नहीं है।
Fastgif (जहां all डिकोड किया गया gif है fetch)
import { Decoder } from 'fastgif'
const d = new Decoder()
window.fetch('https://media.giphy.com/media/tTutsU63rnHC8/giphy.gif')
.then((response) => response.arrayBuffer())
.then((buffer) => d.decode(buffer))
.then(async (frames) => {
const canvas = document.createElement('canvas');
canvas.width = all[0].imageData.width;
canvas.height = all[0].imageData.height;
const ctx = canvas.getContext('2d');
let frame = 0;
while (true) {
ctx.putImageData(all[frame].imageData, 0, 0);
await new Promise((resolve) => window.setTimeout(resolve, all[frame].delay));
if (++frame === all.length) {
frame = 0;
}
}
})
Gifuct-js यह मैंने केवल एक फ्रेम प्रदान करने की कोशिश की, यह देखने के लिए कि क्या पारदर्शिता काम करती है, लेकिन पृष्ठभूमि पूरी तरह से काली थी और कोई पारदर्शिता नहीं थी।
var tempCanvas = document.createElement('canvas')
var tempContext = tempCanvas.getContext('2d')
window.fetch('https://media.giphy.com/media/tTutsU63rnHC8/giphy.gif')
.then((response) => response.arrayBuffer())
.then((buffer) => new GIF(buffer))
.then((gif) => gif.decompressFrames(true))
.then(async (frames) => {
const frame = frames[0]
const dims = frame.dims
c.width = dims.width
c.height = dims.height
tempCanvas.width = dims.width
tempCanvas.height = dims.height
const imageData = tempContext.createImageData(dims.width, dims.height)
tempContext.putImageData(imageData, 0, 0)
// set the patch data as an override
imageData.data.set(frame.patch)
let pix = imageData.data
ctx.clearRect(0, 0, c.width, c.height)
ctx.drawImage(tempCanvas, 0, 0)
ctx.putImageData(imageData, 0, 0)
image.src = tempCanvas.toDataURL('image/png')
})
मुझे उम्मीद है कि अगर किसी वेबसाइट में <img src='https://media.giphy.com/media/tTutsU63rnHC8/giphy.gif' /> जोड़ा गया है तो रेंडर ऐसा दिखेगा। पारदर्शी पृष्ठभूमि के साथ एनिमेटेड।
1 उत्तर
यहाँ एक समाधान है जो मैंने पाया है जिसमें जिफ़लर और कोंवाज शामिल हैं: https://konvajs.org/docs/sandbox/GIF_On_Canvas.html।
अपडेट करें यहां एक समाधान दिया गया है जिसमें विलंब को समायोजित करने की आवश्यकता शामिल है (onDrawFrame फ़ंक्शन के भीतर टिप्पणी नोट करें।
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var canvas = document.createElement('canvas');
// use external library to parse and draw gif animation
function onDrawFrame(ctx, frame) {
/*
Here is where you can adust the delay between frames.
*/
frame.delay = 80;
// update canvas that we are using for Konva.Image
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(frame.buffer, frame.x, frame.y);
// redraw the layer
layer.draw();
}
gifler('https://media1.giphy.com/media/l4pTpdRiFv10jFlNC/200w_d.gif').frames(canvas, onDrawFrame, true);
// draw resulted canvas into the stage as Konva.Image
var image = new Konva.Image({
image: canvas
});
layer.add(image);<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@3.4.1/konva.min.js"></script>
<script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
<meta charset="utf-8" />
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>