当前位置： 首页 > news >正文

表情包可视化编辑、生成配置信息数据工具

news 2025/6/27 20:46:11

合成GIF图片 - 表情包 后续，用于快速、便捷生成 img_config.js 中 要生成的GIF每一帧数据（写入头像图片信息参数）；

 

1、先上传 写入GIF中头像 标准图，同时获取图片信息，更新 写入GIF中头像 初始值（宽、高）；
未上传 写入GIF中头像 标准图 时，隐藏上传GIF序列图片组功能；
更新头像时，重置上传GIF序列图片组数据；


2、可视化编辑每一帧头像写入GIF中数据；


3、一键生成配置信息数据，可复制数据至 img_config.js 中，根据实际开发需要编辑；

 
editor.html
一键生成配置信息数据

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表情包可视化编辑、生成配置信息数据工具</title>
<style>
[v-cloak]{ display: none;}
body{ line-height: 1.6; font-size: 16px; overflow-x: hidden;}
.show_head{ display: flex; justify-content: flex-start; align-items: center;}
.show_head img{ height: 70px; margin-left: 30px;}
.title{ padding: 10px 0; color: royalblue; font-weight: bold;}
.start_data{ padding-bottom: 15px; display: flex; justify-content: flex-start; align-items: center;}
.start_data_li{ width: 100px; margin-right: 20px;}
.start_data_li input{ display: block; width: 100%; height: 28px;}
.upimg_input{ display:block; border:#000 solid 1px; cursor: pointer;}
hr{ border: royalblue solid 2px;}
.show_img{ padding: 10px 0;}
.show_img_li{ display: flex; justify-content: flex-start; align-items: flex-start;}
.show_img_li_l{ position: relative;}
.show_img_li_l img:nth-child(1){ background-color: red;}
.show_img_li_l img:nth-child(2){ position: absolute;}
.show_img_li_r{ margin-left: 30px;}
.show_img_li_r > div{ line-height: 30px; display: flex; justify-content: flex-start; align-items: center;}
.show_img_li_r_title{ color: royalblue;}
.show_img_li_r > div > div{ width: 80px; white-space: nowrap;}
.show_img_li_r > div input{ width: 100px;}
.get_data{ width: 100px; height: 40px; text-align: center; color: #fff; border-radius: 20px; border: none; background: royalblue; position: fixed; right: 20px; top: 20px; cursor: pointer;}
</style>
</head><body><div id="app" v-cloak><div class="show_head"><div><div class="title">上传 写入GIF中头像 标准图</div><input class="upimg_input" ref="referenceUploadHead" @change="sendImgHead" type="file" accept="image/*" /></div><img :src="headImg" /></div><div class="title">设置 写入GIF中头像 初始值</div><div class="start_data"><div class="start_data_li"><div>宽(px)</div><input v-model="start.w" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>高(px)</div><input v-model="start.h" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>x(px)</div><input v-model="start.x" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>y(px)</div><input v-model="start.y" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>旋转(deg)</div><input v-model="start.rotate" type="number" name="" id="" value="" /></div></div><hr v-if="headImg" /><div v-if="headImg" class="title">上传GIF序列图片组</div><input v-if="headImg" class="upimg_input" ref="referenceUploadMore" @change="sendImgMore" type="file" accept="image/*" multiple /><div v-if="imgArr.length" class="title">展示GIF序列图片组</div><div class="show_img"><div v-if="imgArr.length" v-for="item,index in imgArr" class="show_img_li"><div class="show_img_li_l"><img :src="item.imgShow" ><!-- 头像旋转中心点影响写入CANVAS中旋转信息 transform-origin: left top; 负数旋转设置 --><!-- <img :style="'width: ' + item.w + 'px; height: ' + item.h + 'px; left: ' + item.x + 'px; top: ' + item.y + 'px; transform: rotate(' + item.rotate + 'deg); opacity: .5;' + (item.rotate < 0 ? 'transform-origin: left top;' : '')" :src="headImg" > --><img :style="'width: ' + item.w + 'px; height: ' + item.h + 'px; left: ' + item.x + 'px; top: ' + item.y + 'px; transform: rotate(' + item.rotate + 'deg); opacity: .5;'" :src="headImg" ></div><div class="show_img_li_r"><div class="show_img_li_r_title">{{imgArr[index].img}}：</div><div class=""><div>宽(px)</div><input v-model="imgArr[index].w" type="number" name="" id="" value="" /></div><div class=""><div>高(px)</div><input v-model="imgArr[index].h" type="number" name="" id="" value="" /></div><div class=""><div>x(px)</div><input v-model="imgArr[index].x" type="number" name="" id="" value="" /></div><div class=""><div>y(px)</div><input v-model="imgArr[index].y" type="number" name="" id="" value="" /></div><div class=""><div>旋转(deg)</div><input v-model="imgArr[index].rotate" type="number" name="" id="" value="" /></div></div></div></div><button v-if="imgArr.length" @click="getData" class="get_data">获取数据</button></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
function getObjectURL(file, callback) {//console.log(file);var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}callback(url);
}
function getfileReaderURL(file,callback){var reader = new FileReader();reader.readAsDataURL(file);reader.onload=function(e){callback( reader.result);}reader.onloadend=function(e){}
}var VM = new Vue({el:"#app",data:{headImg:'',start:{w:0,h:0,x:0,y:0,rotate:0,},imgArr:[],},created() {},mounted() {},watch() {},methods:{// 上传头像标准图sendImgHead(e){// console.log(e.target.files[0]);if(e.target.files[0]){getObjectURL(e.target.files[0],(url)=>{this.headImg = url;// console.log(this.headImg);let img = new Image();img.src = url;img.onload = ()=>{Object.assign(this.start,{w:img.width,h:img.height});}this.imgArr = [];});this.$refs.referenceUploadHead.value = null;}},// 上传图片组sendImgMore(e){// console.log(e.target.files[0]);if(e.target.files[0]){this.imgArr = [];for(var i = 0; i < e.target.files.length ; i ++){// 图片组 blob 图片getObjectURL(e.target.files[i],(url)=>{this.imgArr.push({imgShow:url,img:e.target.files[i].name,...this.start});// console.log(this.imgArr);});// // 图片组 base64 图片// this.getImgArr(i,e.target.files[i],e.target.files[i].name);// if(i == e.target.files.length - 1){//   this.$refs.referenceUploadMore.value = null;// }}}},// // 图片组 base64 图片// getImgArr(i,imgFile,imgName){//   getfileReaderURL(imgFile,(url)=>{//     // this.imgArr.push({imgShow:url,img:imgName,...this.start});//     // this.imgArr[i] = {imgShow:url,img:imgName,...this.start};//     // this.$forceUpdate();//     this.$set(this.imgArr,i,{imgShow:url,img:imgName,...this.start})//     // console.log(this.imgArr);//   });// },// 获取数据getData(){console.log(this.imgArr)}}
})</script>
</body>
</html>

editor-preview-resault.html
一键生成配置信息数据，同时，调用接口预览生成后的GIF图效果
接口参考：
PHP合成生成GIF动图 或 PHP使用imagick扩展合成透明GIF图帧重叠问题解决方案

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表情包可视化编辑、生成配置信息数据工具</title>
<style>
[v-cloak]{ display: none;}
body{ line-height: 1.6; font-size: 16px; overflow-x: hidden;}
.show_head{ display: flex; justify-content: flex-start; align-items: center;}
.show_head img{ height: 70px; margin-left: 30px;}
.title{ padding: 10px 0; color: royalblue; font-weight: bold;}
.start_data{ padding-bottom: 15px; display: flex; justify-content: flex-start; align-items: center;}
.start_data_li{ width: 100px; margin-right: 20px;}
.start_data_li input{ display: block; width: 100%; height: 28px;}
.upimg_input{ display:block; border:#000 solid 1px; cursor: pointer;}
hr{ border: royalblue solid 2px;}
.show_img{ padding: 10px 0;}
.show_img_li{ display: flex; justify-content: flex-start; align-items: flex-start;}
.show_img_li_l{ position: relative;}
.show_img_li_l img:nth-child(1){ background-color: red;}
.show_img_li_l img:nth-child(2){ position: absolute;}
.show_img_li_r{ margin-left: 30px;}
.show_img_li_r > div{ line-height: 30px; display: flex; justify-content: flex-start; align-items: center;}
.show_img_li_r_title{ color: royalblue;}
.show_img_li_r > div > div{ width: 80px; white-space: nowrap;}
.show_img_li_r > div input{ width: 100px;}
.get_data{ width: 100px; height: 40px; text-align: center; color: #fff; border-radius: 20px; border: none; background: royalblue; position: fixed; right: 20px; top: 20px; cursor: pointer;}
.show_gif{ max-width: 560px; position: fixed; right: 20px; top: 100px;}
.loading{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 30px; background-color: rgba(0,0,0,.5); position: fixed; left: 0; top: 0;}
</style>
</head><body><div id="app" v-cloak><div class="show_head"><div><div class="title">上传 写入GIF中头像 标准图</div><input class="upimg_input" ref="referenceUploadHead" @change="sendImgHead" type="file" accept="image/*" /></div><img :src="headImg" /></div><div class="title">设置 写入GIF中头像 初始值</div><div class="start_data"><div class="start_data_li"><div>宽(px)</div><input v-model="start.w" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>高(px)</div><input v-model="start.h" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>x(px)</div><input v-model="start.x" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>y(px)</div><input v-model="start.y" type="number" name="" id="" value="" /></div><div class="start_data_li"><div>旋转(deg)</div><input v-model="start.rotate" type="number" name="" id="" value="" /></div></div><hr v-if="headImg" /><div v-if="headImg" class="title">上传GIF序列图片组</div><input v-if="headImg" class="upimg_input" ref="referenceUploadMore" @change="sendImgMore" type="file" accept="image/*" multiple /><div v-if="imgArr.length" class="title">展示GIF序列图片组</div><div class="show_img"><div v-if="imgArr.length" v-for="item,index in imgArr" class="show_img_li"><div class="show_img_li_l"><img :src="item.imgShow" ><!-- 头像旋转中心点影响写入CANVAS中旋转信息 transform-origin: left top; 负数旋转设置 --><!-- <img :style="'width: ' + item.w + 'px; height: ' + item.h + 'px; left: ' + item.x + 'px; top: ' + item.y + 'px; transform: rotate(' + item.rotate + 'deg); opacity: .5;' + (item.rotate < 0 ? 'transform-origin: left top;' : '')" :src="headImg" > --><img :style="'width: ' + item.w + 'px; height: ' + item.h + 'px; left: ' + item.x + 'px; top: ' + item.y + 'px; transform: rotate(' + item.rotate + 'deg); opacity: .5;'" :src="headImg" ></div><div class="show_img_li_r"><div class="show_img_li_r_title">{{imgArr[index].img}}：</div><div class=""><div>宽(px)</div><input v-model="imgArr[index].w" type="number" name="" id="" value="" /></div><div class=""><div>高(px)</div><input v-model="imgArr[index].h" type="number" name="" id="" value="" /></div><div class=""><div>x(px)</div><input v-model="imgArr[index].x" type="number" name="" id="" value="" /></div><div class=""><div>y(px)</div><input v-model="imgArr[index].y" type="number" name="" id="" value="" /></div><div class=""><div>旋转(deg)</div><input v-model="imgArr[index].rotate" type="number" name="" id="" value="" /></div></div></div></div><button v-if="imgArr.length" @click="getData" class="get_data">获取数据</button><img v-if="resGif" :src="resGif" class="show_gif" ><div v-if="loadingIn" class="loading">处理中，请稍候...</div></div><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
function getObjectURL(file, callback) {//console.log(file);var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}callback(url);
}
function getfileReaderURL(file,callback){var reader = new FileReader();reader.readAsDataURL(file);reader.onload=function(e){callback( reader.result);}reader.onloadend=function(e){}
}var VM = new Vue({el:"#app",data:{headImg:'',start:{w:0,h:0,x:0,y:0,rotate:0,},imgArr:[],resGif:'',loadingIn:false,},created() {},mounted() {},watch:{},methods:{// 上传头像标准图sendImgHead(e){// console.log(e.target.files[0]);if(e.target.files[0]){getObjectURL(e.target.files[0],(url)=>{this.headImg = url;// console.log(this.headImg);let img = new Image();img.src = url;img.onload = ()=>{Object.assign(this.start,{w:img.width,h:img.height});}this.imgArr = [];});this.$refs.referenceUploadHead.value = null;}},// 上传图片组sendImgMore(e){// console.log(e.target.files[0]);if(e.target.files[0]){this.imgArr = [];for(var i = 0; i < e.target.files.length ; i ++){// 图片组 blob 图片// getObjectURL(e.target.files[i],(url)=>{//   this.imgArr.push({imgShow:url,img:e.target.files[i].name,...this.start});//   // console.log(this.imgArr);// });// 图片组 base64 图片this.getImgArr(i,e.target.files[i],e.target.files[i].name);if(i == e.target.files.length - 1){this.$refs.referenceUploadMore.value = null;}}}},// 图片组 base64 图片getImgArr(i,imgFile,imgName){getfileReaderURL(imgFile,(url)=>{// this.imgArr.push({imgShow:url,img:imgName,...this.start});// this.imgArr[i] = {imgShow:url,img:imgName,...this.start};// this.$forceUpdate();this.$set(this.imgArr,i,{imgShow:url,img:imgName,...this.start})// console.log(this.imgArr);});},// 获取数据及生成预览GIFgetData(){this.loadingIn = true;// console.log(this.imgArr);console.log(this.imgArr.map((v)=>{return Object.assign({},v,{imgShow:''})}))var headImg = new Image();headImg.src = this.headImg;headImg.onload = function(){make_gif();}var thisGifData = this.imgArr;var imgL = this.imgArr.length;var _this = this;function make_gif(){// 加载所有配置生成GIF素材图片集var imgStart = 0;var bfb = 0;let base64ImgArr = [];IfLoadImg();function IfLoadImg(){if(imgStart >= imgL){$.ajax({url: "http://192.168.50.174/make-gif.php",type: "post",data: {filelist:base64ImgArr,prefix:'zybqb',},// dataType: "json",dataType: "text",success: function(data) {// console.log(data);_this.resGif = data;_this.loadingIn = false;}});console.log('图片加载完成，图片总数量：' + imgStart);return;}let multiple = 2.5; //图片太大=>缩小倍数loadImg(imgStart);function loadImg(imgKey){var curImg = thisGifData[imgKey];var loadImage = new Image();loadImage.src = curImg.imgShow;loadImage.onload = function(){var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');canvas.width = this.width / multiple;canvas.height = this.height / multiple;//铺底色// ctx.fillStyle = "#fff";// ctx.fillRect(0, 0, canvas.width, canvas.height);// 写入自定义头像curImg.x = parseFloat(curImg.x);curImg.w = parseFloat(curImg.w);curImg.y = parseFloat(curImg.y);curImg.h = parseFloat(curImg.h);if(curImg.rotate){if(curImg.rotateCenterX && curImg.rotateCenterY){var translateX = curImg.rotateCenterX;var translateY = curImg.rotateCenterY;}else{var translateX = curImg.x / multiple + curImg.w / multiple / 2;var translateY = curImg.y / multiple + curImg.h / multiple / 2;}ctx.translate(translateX , translateY);ctx.rotate(curImg.rotate * Math.PI/180);ctx.drawImage(headImg, curImg.x / multiple - translateX, curImg.y / multiple - translateY, curImg.w / multiple, curImg.h / multiple);ctx.rotate(-(curImg.rotate * Math.PI/180));ctx.translate(-translateX , -translateY);}else{ctx.drawImage(headImg, curImg.x / multiple, curImg.y / multiple, curImg.w / multiple, curImg.h / multiple);}// 写入GIF当前帧图片ctx.drawImage(this, 0, 0, this.width / multiple, this.height / multiple);// // 向原GIF中嵌入增加元素// ctx.fillStyle = "#f00";// // ctx.fillRect(106, 26, 80, 114);// ctx.font = 'bold italic 32px "PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"';// ctx.fillText(imgStart,106, 26, 80, 114);// console.log(canvas.toDataURL("image/jpg"))base64ImgArr[imgStart] = canvas.toDataURL("image/png");imgStart++;IfLoadImg();bfb = parseInt(imgStart / imgL * 100);}}}}}}
})</script>
</body>
</html>

用于测试图片文件：

头像：

 

图片组：

 

 

 

http://www.lryc.cn/news/9263.html

相关文章：

  • java简单循环结构
  • 【Servlet+Jsp+Mybatis+Maven】WEB图书馆管理系统
  • 【WPF】WindowChrome 自定义窗口完美实现
  • Python客户端使用SASL_SSL连接Kafka需要将jks密钥转换为pem密钥，需要转化成p12格式再转换pem才能适配confluent_kafka包
  • JDK8 ConcurrentHashMap源码分析
  • 前置知识-初值问题、欧拉法、改进欧拉法
  • 睡眠影响寿命，这几个睡眠习惯赶紧改掉！
  • Linux逻辑卷管理器（PV、VG、LV、PE）
  • Centos7 内核升级
  • SpringBoot 启动配置文件加载和参数配置修改问题
  • 布隆过滤器和布谷鸟过滤器详解
  • WebGIS前端框架（openlayers，mapbox，leaflet）图形图像底层渲染原理分析
  • AcWing语法基础课笔记 第五章 C++中的字符串
  • 抓包工具Charles(一)-下载安装与设置
  • SpringBoot09：Swagger
  • Git 常用命令
  • 查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决
  • 链表数据结构
  • 汽车DTC故障内码与标准故障码的解析与转换
  • 零基础学习测试还是开发？
  • 如何加入new bing候补名单
  • 中国天气——西风带环流和寒潮
  • 2022黑马Redis跟学笔记.实战篇(四)
  • Allegro中如何删除多余D码操作指导
  • 学生投票系统-课后程序(JAVA基础案例教程-黑马程序员编著-第三章-课后作业)
  • 初始化一个列表python
  • 【electron】webview嵌入页面发送消息给父级页面
  • Whids：一款针对Windows操作系统的开源EDR
  • 初级调色转档CameraRaw
  • Mybatis源码(3) - Executor执行过程 | 一级缓存 | 二级缓存