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

news2024/11/16 19:02:14

合成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) { // basic
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) { // webkit or chrome
    url = 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) { // basic
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) { // webkit or chrome
    url = 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);
      });
    },
    
    // 获取数据及生成预览GIF
    getData(){
      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.coloradmin.cn/o/349446.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

5-HT2A靶向药物|适应症|市场销售-上市药品前景分析

5-HT2A靶向药物|适应症|市场销售-上市药品前景分析

据世界卫生组织称&#xff0c;抑郁症是一种多因素疾病&#xff0c;影响全球约3.5 亿人。中枢神经系统最广泛的单胺 - 血清素 (5-HT) 被认为在这种情况的病理机制中起着至关重要的作用&#xff0c;并且神经递质的重要性被“血清素假说”提升&#xff0c;将抑郁症的存在联系起来 …
阅读更多...
配置Qt Creator

配置Qt Creator

前言 为了使Qt Creator更像您最喜欢的代码编辑器或IDE&#xff0c;您可以更改键盘快捷键、配色方案、通用高亮显示、代码片段和版本控制系统的设置。 检查生成和运行设置 Qt Creator是一个集成开发环境(IDE)&#xff0c;可以用来开发Qt应用程序。虽然您可以使用Qt Installer…
阅读更多...
聊天不发表情包会不习惯吗，Python带你轻松采集上万个表情包

聊天不发表情包会不习惯吗，Python带你轻松采集上万个表情包

前言 (&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e;嗨 大家好&#xff0c;这里是小圆 聊天没表情包你会有点不习惯的感jio吗 就比如新注册了个qq或者微信再或者企业微信 emmm我就是这样拿到新账号后&#xff0c;跟别人聊聊天想发送表情包 &#xff0c;…
阅读更多...
C++-类和对象（下）

C++-类和对象（下）

C-类和对象&#xff08;下&#xff09;一&#xff0c;const成员函数二&#xff0c;再谈构造函数1&#xff0c;初始化列表2&#xff0c;explicit关键字三&#xff0c;static成员四&#xff0c;友元&#xff08;friend&#xff09;1&#xff0c;全局函数做友元2&#xff0c;类做友…
阅读更多...
冷冻电镜 - ChimeraX Density Map 密度图 操作

冷冻电镜 - ChimeraX Density Map 密度图 操作

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://blog.csdn.net/caroline_wendy/article/details/129055160 由冷冻电镜所生成的Volume，需要观察其内部结构，使用ChimeraX进行操作。 加载Volumes，例如my_volume.mrc 效果如下： 高斯滤波 在命令行(Co…
阅读更多...
python 数据分析可视化实战 超全 附完整代码数据

python 数据分析可视化实战 超全 附完整代码数据

代码数据&#xff1a;https://download.csdn.net/download/qq_38735017/873799141.1 数据预处理1.1.1 异常值检测①将支付时间转为标准时间的过程中发生错误&#xff0c;经排查错误数据为‘2017/2/29’,后将其修改为‘2017/2/27’。②经检测发现部分订单应付金额与实付金额都为…
阅读更多...
解决jupyter以及windows系统中pycharm编译器画图的中文乱码问题大全

解决jupyter以及windows系统中pycharm编译器画图的中文乱码问题大全

一、jupyter环境下中文乱码问题解决 我们在jupyter的notebook中使用matplotlib画图的时候&#xff0c;经常性的会遇见一些中文乱码显示□的情况,如下所示: 在此&#xff0c;网上给出的方法大多是以下的解决方法&#xff1a; import matplotlib.pyplot as pltplt.rcParams[fo…
阅读更多...
界面组件Telerik UI for WinForms R1 2023——全新的Windows 11主题

界面组件Telerik UI for WinForms R1 2023——全新的Windows 11主题

Telerik UI for WinForms拥有适用Windows Forms的110多个令人惊叹的UI控件。所有的UI for WinForms控件都具有完整的主题支持&#xff0c;可以轻松地帮助开发人员在桌面和平板电脑应用程序提供一致美观的下一代用户体验。Telerik UI for WinForms组件发布了2023年第一个重大版本…
阅读更多...
QCon演讲实录（下）：多云管理关键能力实现与解析-AppManager

QCon演讲实录（下）：多云管理关键能力实现与解析-AppManager

在上篇中&#xff0c;我们已经基本了解了多云管理。现在&#xff0c;我们将深入探讨多云管理关键能力实现&#xff1a;AppManager。 什么是AppManager&#xff1f; 上面我们讲了理论、我们自己使用的交付流程和整体架构&#xff0c;下面我们进入关键能力实现与解析的环节&…
阅读更多...
Allegro如何通过视图显示区分动态和静态铜皮操作指导

Allegro如何通过视图显示区分动态和静态铜皮操作指导

Allegro如何通过视图显示区分动态和静态铜皮操作指导 用Allegro做PCB设计的时候，通常动态和静态铜皮是无法通过视图显示区分的，只能通过show element查看得知，如下图 左边铜皮是动态铜皮，右边是静态铜皮 但Allegro可以通过一些设置让动静态铜皮以不同效果显示出来 具体操…
阅读更多...
Elasticsearch：使用 intervals query - 根据匹配项的顺序和接近度返回文档

Elasticsearch：使用 intervals query - 根据匹配项的顺序和接近度返回文档

Intervals query 根据匹配项的顺序和接近度返回文档。Intervals 查询使用匹配规则&#xff0c;由一小组定义构成。 然后将这些规则应用于指定字段中的术语。 这些定义产生跨越文本正文中的术语的最小间隔序列。 这些间隔可以通过父源进一步组合和过滤。 上述描述有点费解。我…
阅读更多...
【计算机网络】HTTPS协议原理

【计算机网络】HTTPS协议原理

文章目录一、认识HTTPS协议二、为什么要发明HTTPS三、HTTP与HTTPS的区别四、常见的加密方式1. 对称加密2. 非对称加密3. 数据摘要4. 数字签名五、HTTPS的原理探究方案1&#xff1a;只使用对称加密方案2&#xff1a;只使用非对称加密方案3&#xff1a;双方都使用非对称加密方案4…
阅读更多...
2.15学习总结

2.15学习总结

上次被学长的问题给问住了&#xff0c;突然发现自己动规有点糊涂&#xff0c;然后就去屁颠屁颠的复习&#xff0c;找几个之前做过的题&#xff0c;突然发现&#xff0c;竟然还是写了好久才写出来&#xff0c;怎么说呢&#xff0c;信心被强烈打击到&#xff0c;然后自己找了一个…
阅读更多...
MyBatis 之二（增、删、改操作）

MyBatis 之二（增、删、改操作）

文章目录1. 修改操作1.1 在 mapper&#xff08;interface&#xff09;里面添加修改方法的声明1.2 在 XMl 中添加 <update> 标签和修改的 sql 代码1.3 在 UserMapper 中右键 Generate 点击 Test 生成 update 测试类2. 删除操作2.1 在 mapper &#xff08;interface&#x…
阅读更多...
重生之我是赏金猎人-SRC漏洞挖掘(六)-记一次有趣的客户端RCE+服务端XXE挖掘

重生之我是赏金猎人-SRC漏洞挖掘(六)-记一次有趣的客户端RCE+服务端XXE挖掘

0x01 起因 朋友给某甲方做渗透测试&#xff0c;奈何甲方是某知名保险&#xff0c;系统太耐艹&#xff0c;半天不出货 兄弟喊我来一块来看&#xff0c;于是有了本文 0x02 客户端RCE一处 朋友把靶标发给我看了下&#xff0c;除了两个下载链接啥也没有 链接下载下来的东西如图…
阅读更多...
回溯算法理论基础

回溯算法理论基础

目录什么是回溯法回溯法的效率回溯法解决的问题如何理解回溯法回溯法模板什么是回溯法 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。 回溯是递归的副产品&#xff0c;只要有递归就会有回溯。 所以以下讲解中&#xff0c;回溯函数也就是递归函数&#xff0c;指…
阅读更多...
SpringCloud: sentinel降级配置、热点参数、系统规则 配置到nacos

SpringCloud: sentinel降级配置、热点参数、系统规则 配置到nacos

一、application.yml spring.cloud.sentinel cloud:nacos:discovery:# 服务注册地址server-addr: xxx.xxx.xxx.xxx:8848sentinel:eager: truetransport:# 控制台地址dashboard: localhost:9999# nacos配置持久化datasource:ds2:nacos:server-addr: xxx.xxx.xxx.xxx:8848dataId…
阅读更多...
YOLO 格式数据集制作

YOLO 格式数据集制作

目录 1. YOLO简介 2.分割数据集准备 3.代码展示 整理不易&#xff0c;欢迎一键三连&#xff01;&#xff01;&#xff01; 1. YOLO简介 YOLO&#xff08;You Only Look Once&#xff09;是一种流行的目标检测和图像分割模型&#xff0c;由华盛顿大学的 Joseph Redmon 和 Al…
阅读更多...
B端产品设计表单的主要分类和相关控件认识

B端产品设计表单的主要分类和相关控件认识

在 Ant、TDesign、Arco 等开源系统中&#xff0c;表单的控件罗列、解释都已经非常全面了&#xff0c;即使是新手完整的看一遍&#xff08;这可不能偷懒&#xff5e;&#xff09;&#xff0c; 也能对表单相关控件有个大致的认识了。 之所以还要更新今天这篇内容&#xff0c;就是…
阅读更多...
「5」线性代数（期末复习）

「5」线性代数（期末复习）

&#x1f680;&#x1f680;&#x1f680;大家觉不错的话&#xff0c;就恳求大家点点关注&#xff0c;点点小爱心&#xff0c;指点指点&#x1f680;&#x1f680;&#x1f680; 目录 第四章 向量组的线性相关性 &5&#xff09;向量空间 第五章 相似矩阵及二次型 &a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023