मैं एक ऐसी वेबसाइट विकसित कर रहा हूं जहां एक पारदर्शी एनिमेटेड 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' /> जोड़ा गया है तो रेंडर ऐसा दिखेगा। पारदर्शी पृष्ठभूमि के साथ एनिमेटेड।

0
Victor 3 अगस्त 2019, 01:46

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>
0
GenericUser 3 अगस्त 2019, 17:09