js实现GIF图片的分解和合成

2024-12-01 21:36:03

无意中看到一篇文章写得是关于纯前端处理GIF图片的问题，感觉挺有意思的所以自己也实现了一下；

主要用到的有两个第三方库：合成GIF图片的gif.js和分解的libgif.js;

分解GIF

1. 引入Git库

import SuperGif from './libgif.js'

2. 处理图片

var file = e.target.files[0];
 console.log(file.type.indexOf('image/gif'));
 load_gif(file);
function load_gif(gif_source) {
   var gifImg = document.getElementById('gifImg');
   // gif库需要img标签配置下面两个属性
   gifImg.setAttribute('rel:animated_src', URL.createObjectURL(gif_source))
   gifImg.setAttribute('rel:auto_play', '0')

   // 新建gif实例
   var rub = new SuperGif({ gif: gifImg } );

   var running = false;
   rub.load(function(){
    var img_list = [];
    var j = 0;
    console.log(rub.get_length());
   for (var i=1; i <= rub.get_length(); i++) {
    // 遍历gif实例的每一帧
    rub.move_to(i);

    var imgImage = new Image();
    //canvas生成base64图片数据
    imgImage.src = rub.get_canvas().toDataURL('image/jpeg',0.8);
   }
  }

合成GIF图片

1. 引入Git库

import GIF from './gif.js'

2. 图片合成

var gif = new GIF({
   workers: 2,
   quality: 10,
   workerScript: 'js/gif.worker.js'
});
var j = 0;

var canvas= document.createElement("canvas");
var ctx = tCanvas.getContext('2d');

for (var i=1; i <= len; i++) {

 var imgImage = new Image();
 imgImage.src = img;
 imgImage.onload = function (e) {

  //Canvas绘制图片
  canvas.width = width;
  canvas.height = height;
  console.log(width,height)
  //铺底色
  ctx.fillStyle = "#fff";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imgImage, 0, 0, width, height);

  gif.addFrame(canvas,{copy:true,delay:50});
  j++;
  //图片
  if(j>=len) {
  gif.render()
  };
 }
}
gif.on('finished', function(blob) {
  //生成图片链接
   var url = URL.createObjectURL(blob);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js canvas实现5张图片合成一张图片

本文具体要实现的效果类似下面这张图片,主题流程大概是,页面上有类似这样布局的结构,点击中间那个紫色的按钮就会生成一张这样的图片,并且能够让用户下载图片的 1.首先我们布局页面的时候用的都是图片来布局成这个样子[CSS自己脑补],class为pho-bg这一段是页面开始显示的结构,几张图片定位,按钮在中间的样子.class为photo的就是用来到时候放置生成的图片.canvas就是画布.至于下面的两张图片其实就是按钮的图片和背景图,到时候一并加入画布里面[不过在页面的时候不显示] <div cla
使用ImageMagick进行图片缩放、合成与裁剪(js+python)

最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画.由于需要在服务器端处理,使用就研究使用imagemagick来进行.同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放.合成后进行裁剪吧. 首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影): 安装ImageMagick的过程就不讲了,可以参考官网的安装方法:http://www.imagemagi
js实现GIF动图分解成多帧图片上传

在项目中遇到需要支持上传gif图片,并把其分解的帧图片一次展示给用户.话不多说直接上代码分解gif图片需要使用libgif-js这个库! 1. 引入Git库 import SuperGif from './libgif.js' 2. 分解Gif为png图片 const GifDecomposer = { structureGifObject (gifFiles, cb) { // gifFiles 获取的文件对象 e.target.files[0] const gifImg = documen
js canvas实现二维码和图片合成的海报

本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上.把名字画到画布上.把整张画布转为图片. 一.定义画布和合成海报的img <style type="text/css"> #canbox { width: 100%
Nodejs下使用gm圆形裁剪并合成图片的示例

说到Nodejs下的图片处理可能第一想到就是gm,gm底层可以是GraphicsMagic(其实也是gm的由来),也可以是ImageMagick(其实GraphicsMagic本身也是从ImageMagic分割而来,现在独立了).虽然这两个工具本身都不是js实现,所以需要额外安装,不过此工具非常常见,可能已经预装在linux系统下,而且安装也很方便,所以不用因为看到是"第三方"就放弃.虽然说这两个软件都只是底层,无需关心,可笔者在实践中发现必须得用GraphicsMagic,所以这里就
JavaScript图片处理与合成总结

引言图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求.实际前端业务中,也经常会有很多的项目需要用到图片加工和处理.由于过去一段时间公司的业务需求,让我在这方面积累了一些干货,趁着年后这段时间总结成一系列文章与大家分享,希望能对各位努力中的前端童鞋带来启发和帮助本系列分成以下4个部分: 基础类型图片处理技术之缩放与裁剪: 基础类型图片处理技术之图片合成: 基础类型图片处理技术之文字合成: 算法类型图片处理技术: 文章中,我会提到很多在实际实践中所遇到的坑或者经验,应该算是干
js实现GIF图片的分解和合成

无意中看到一篇文章写得是关于纯前端处理GIF图片的问题,感觉挺有意思的所以自己也实现了一下: 主要用到的有两个第三方库:合成GIF图片的gif.js和分解的libgif.js; 分解GIF 1. 引入Git库 import SuperGif from './libgif.js' 2. 处理图片 var file = e.target.files[0]; console.log(file.type.indexOf('image/gif')); load_gif(file); function lo
使用python-cv2实现视频的分解与合成的示例代码

1.视频分解图片我们使用cv2.VideoCapture来读取视频 import cv2 cap = cv2.VideoCapture('1.mp4') isOpened = cap.isOpened # 判断视频是否可读 print(isOpened) fps = cap.get(cv2.CAP_PROP_FPS) # 获取图像的帧,即该视频每秒有多少张图片 width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)) # 获取图像的宽度和高度 height
js实现单击图片放大图片的方法

本文实例讲述了js实现单击图片放大图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <html> <title>单击图片即可放大图片</title> <body> 点击图片预览效果.<br> <img src="/images/m01.jpg" onclick="this.width+=50;this.height+=50" onclick="javascript:
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题

解决方法如下所示: <script type="text/javascript"> function showImg(url) { var frameid = 'frameimg' + Math.random(); window.img = '<img id="img" style="width: 100%;height: auto" src=\'' + url + '?' + Math.random() + '\' />
Vue.js中的图片引用路径的方式

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png
JS点击图片弹出文件选择框并覆盖原图功能的实现代码

简单说下原理,把显示的图片的<img>标签和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=
angular.js+node.js实现下载图片处理详解

前言本文主要介绍的是angular.js+node.js实现下载图片处理,下载有两种方式,下面话不多说,来看看详细的介绍吧. 第一种: 不指定完整路径,然后发送get给server让server自己去拼接路径,然后用express的res.download来做下载: Express: var filePath = path.join(savePath, file[0].name); console.log('Download file: ' + filePath); res.download(
js简单实现图片延迟加载的方法

本文实例讲述了js简单实现图片延迟加载的方法.分享给大家供大家参考,具体如下: window.onload=window.onresize=window.onscroll=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left: l, top:
JS实现3D图片旋转展示效果代码

本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c
基于JS代码实现图片在页面中旋转效果

1.概述在一些交易平台网站,如淘宝网.拍拍网等,经常会发现一些图片以圈的形状旋转的效果,如此反复的执行. 2.技术要点主要应用了Math对象的sin(返回数的正弦值)和cos(返回数的余弦值),通过取得正弦值和余弦值然后加一些算法来改变当前层的位置,使图片在页面中旋转. 3.具体实现 (1)本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置,代码如下: <script language="javascript"> var x1=200; var

js实现GIF图片的分解和合成

相关推荐

随机推荐