Published unlisted
Edited
Jun 5, 2019
viewof image = imageInput({
crossOrigin: "anonymous",
initialUrl: "http://pic.962.net/up/2018-7/15305889067284834.gif"
})
gifFrames = require("https://unpkg.com/gif-frames@1.0.1/dist/gif-frames.min.js?main=bundled-min")
// // gifFrames({ url: '', frames: 0, outputType: 'canvas' })
// // .then(function (frameData) {
// // });
// gifFrames({ url: image, frames: 'all', outputType: 'canvas' })
// .then(function (frameData) {
// nine_contents.appendChild(frameData[0].getImage());
// // return frameData[0].getImage();
// }).catch(console.error.bind(console));
// {
// try {
// const frameData = await gifFrames({ url: image, frames: '0'});
// return frameData;
// } catch(err) {
// console.error(err);
// }
// }
// gifrender = require('https://raw.githubusercontent.com/matt-way/gifuct-js/master/src/gif.js')
{
const gif = new GIF;
}
html `<canvas id="test"></canvas>`
{
let imgx = new Image();
let load = new Promise((resolve, reject) => {
imgx.onload = resolve;
imgx.onerror = reject;
});
imgx.src = 'http://pic.962.net/up/2018-7/15305889067284834.gif';
imgx.onclick = ()=>{
};
// return imgx;
const ctx = DOM.context2d(imgx.naturalWidth, imgx.naturalHeight);
ctx.drawImage(imgx, 0, 0);
return ctx.canvas;
// let y = ctx.canvas;
// return y;
// load.then(() => {
// const ctx = DOM.context2d(imgx.naturalWidth, imgx.naturalHeight);
// ctx.drawImage(image, 0, 0);
// // return ctx;
// });
// return imgx;
}
imgy = {
let imgy = new Image();
imgy.src = 'http://pic.962.net/up/2018-7/15305889067284834.gif';
return imgy;
}
pausable("http://pic.962.net/up/2018-7/15305889067284834.gif")
{
imgy.addEventListener('click', ()=>{
let block = html`<div style="width=100;height:100"></div>`;
imgy.appendChild(block);
});
}
import {pausable} from "@tmcw/pausable-gif"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
