Web
Web

cropper.js 视频截图

3336.gif

Cropper是一个裁剪图片的插件,稍微修改也可以用到视频上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/cropper.css">
    <script src="jquery.min.js"></script>
    <script src="js/cropper.js"></script>
    <style>
        img {
            max-width: 100%;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .fg {
            height: 240px;
            width: 320px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <!-- muted 加上静音 防止噪声 -->
    <video muted id="videos" width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">
        <source src="movie.ogg" type="video/ogg">
    </video>
    <div>
        <img id="image" src="1.png">
    </div>
    <button>裁剪</button>
    <canvas width="320" height="240"></canvas>
</body>
<script>
    $(".btn").click(function () {
        ctx.clearRect(0, 0, 1000, 1000);
        $data = $('#image').cropper('getCropBoxData', true);
        console.log($data);
        ctx.drawImage(video, $data.left, $data.top, $data.width, $data.height, 0, 0, $data.width, $data.height);
    })
</script>
<script>
    var canvas = document.querySelectorAll('canvas')[0];
    var ctx = canvas.getContext('2d');
    var video = document.getElementById('videos');
</script>
<script>
    var $image = $('#image');
    $image.cropper({
        viewMode: 3,
        aspectRatio: 16 / 9,
        crop: function (e) {
            video.play();
        }
    }); 
    var cropper = $image.data('cropper');
</script>
</html>

注意这里有一个1.png这是一张透明图片。另外JS也需要修改。

var TEMPLATE = '<div class="cropper-container" touch-action="none">' 
+ '<div style="display: none" class="cropper-wrap-box">' 
+ '<div class="cropper-canvas"></div>' 
+ '</div>' 
+ '<div class="cropper-drag-box" style="display: none"  ></div>' 
+ '<div class="cropper-crop-box">' 
+ '<span class="cropper-view-box"></span>' 
+ '<span class="cropper-dashed dashed-h"></span>' 
+ '<span class="cropper-dashed dashed-v"></span>' 
+ '<span class="cropper-center"></span>' 
+ '<span class="cropper-face"></span>' 
+ '<span class="cropper-line line-e" data-cropper-action="e"></span>' 
+ '<span class="cropper-line line-n" data-cropper-action="n"></span>' 
+ '<span class="cropper-line line-w" data-cropper-action="w"></span>' 
+ '<span class="cropper-line line-s" data-cropper-action="s"></span>' 
+ '<span class="cropper-point point-e" data-cropper-action="e"></span>' 
+ '<span class="cropper-point point-n" data-cropper-action="n"></span>' 
+ '<span class="cropper-point point-w" data-cropper-action="w"></span>' 
+ '<span class="cropper-point point-s" data-cropper-action="s"></span>' 
+ '<span class="cropper-point point-ne" data-cropper-action="ne"></span>' 
+ '<span class="cropper-point point-nw" data-cropper-action="nw"></span>' 
+ '<span class="cropper-point point-sw" data-cropper-action="sw"></span>' 
+ '<span class="cropper-point point-se" data-cropper-action="se"></span>' 
+ '</div>' 
+ '</div>';

这里主要是增加了display:none。隐藏掉一些控件自带的背景。

CSS也需要修改 .cropper-bg 去掉background-image属性。

php 昨天 上周 上月

昨天

$beginYesterday=mktime(0,0,0,date('m'),date('d')-1,date('Y'));
$endYesterday=mktime(0,0,0,date('m'),date('d'),date('Y'))-1;

上周

$array = ["7","1","2","3","4","5","6"];
$time=date("w",time( ));
$beginYesterday=strtotime(date('Y-m-d',strtotime('-'.($array[$time]+6).' day')));
$endYesterday=$beginYesterday+604800-1;

上月

$beginYesterday= strtotime(date('Y-m', strtotime('last month')));
$endYesterday=strtotime(date("Y-m-d 23:59:59", strtotime(-date('d').'day')));


注意:date_default_timezone_set

chooseImage axios 上传文件

api目录下的文件

import axios from 'axios'
const baseURl = 'https://xxxxxxx.com'
axios.defaults.baseURL = baseURl
axios.defaults.withCredentials = true
 
export const upfile = params => {
    return axios.post('/xxxxxx/Tools/upload',params).then(res=>res.data)
}

页面代码

methods: {
 
  getImageBlob:function(url, cb) {
     var xhr          = new XMLHttpRequest();
     xhr.open("get", url, true);
     xhr.responseType = "blob";
     xhr.onload       = function() {
         if (this.status == 200) {
             if(cb) cb(this.response);
         }
     };
     xhr.send();
 },
chooseImage: function() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {  
 const tempFilePaths = res.tempFilePaths;
 const tempFiles =  res.tempFiles;
 console.log(tempFiles)
   this.getImageBlob( tempFilePaths[0] , function(blob){  
  let formData = new FormData();
  formData.append("file",blob) 
  upfile(formData).then(res=>{
  console.log(res) 
  })
      }); 
},
fail: (err) => {
console.log('chooseImage fail', err)
}
})
}
}


php获取明天后天下星期时间戳

function futureTime($command){
    list($com,$n,$x)=explode("-",$command);
    if($com=="xq"){
        $time=date("w",time( ));
        $array = ["7","1","2","3","4","5","6"];
        $time=date("w",time( )); 
        $tmp=strtotime(date('Y-m-d',strtotime('+'.($n*7).' day')))-(($array[$time]-$x)*24*60*60)-8*60*60;
        return [$tmp,$tmp-time()];
    }
    if($com=="rq"){
        $tmp=strtotime(date('Y-m-d',strtotime('+'.$n.' day')))-8*60*60; 
        return [$tmp,$tmp-time()];
    }
}

获取下星期三:futureTime("xq-1-3")

xq:星期标识

1:代表下星期 2:代表下下星期 n:代表第n个星期

3:代表星期三 (1.2.3.4.5.6.7 星期一到星期天)

获取明天:futureTime("rq-1")

rq:日期标识

1:代表下一天

返回值:索引数组,一个是日期的时间戳,另一个是现在距离日期的秒数。

注意:所有的时间都是秒数,并且是从00:00:00开始计算的。


layui form on触发多次的问题

ThinkAdmin后台使用的layui框架,其中的data-open,和data-modal存在一些使用上的问题。例如table表有两个功能项。编辑,增加。

编辑是data-modal

增加是data-open

其中都使用了form.on

复现步骤如下:先点击编辑,然后点击增加。会发现增加里面触发了编辑的form.on事件。百度了一下也没有结果,没办法去查看了layui的源码。

绑定事件源码:

//表单事件监听
  Form.prototype.on = function(events, callback){
    return layui.onevent.call(this, MOD_NAME, events, callback);
  };

调用了一个call

Layui.prototype.onevent = function(modName, events, callback){
    if(typeof modName !== 'string' 
    || typeof callback !== 'function') return this;
    return Layui.event(modName, events, null, callback);
  };

查看event事件

//执行自定义模块事件
  Layui.prototype.event = Layui.event = function(modName, events, params, fn){
    var that = this
    ,result = null
    ,filter = events.match(/\((.*)\)$/)||[] //提取事件过滤器字符结构,如:select(xxx)
    ,eventName = (modName + '.'+ events).replace(filter[0], '') //获取事件名称,如:form.select
    ,filterName = filter[1] || '' //获取过滤器名称,,如:xxx
    ,callback = function(_, item){
      var res = item && item.call(that, params);
      res === false && result === null && (result = false);
    };
    
    //添加事件
    if(fn){
      config.event[eventName] = config.event[eventName] || {};
      //这里不再对多次事件监听做支持,避免更多麻烦
      //config.event[eventName][filterName] ? config.event[eventName][filterName].push(fn) : 
      config.event[eventName][filterName] = [fn];
      return this;
    }
    
    //执行事件回调
    layui.each(config.event[eventName], function(key, item){
      //执行当前模块的全部事件
      if(filterName === '{*}'){
        layui.each(item, callback);
        return;
      }
      
      //执行指定事件
      key === '' && layui.each(item, callback);
      (filterName && key === filterName) && layui.each(item, callback);
    });
    
    return result;
  };
  win.layui = new Layui();

其中可以看到 

config.event[eventName][filterName] = [fn];

可以将事件重置,所以在增加里面重新绑定编辑的事件就可以了,function可以设置为空。