Joyber 发布的文章

次元链接-标准版
HorizonJapan.net
次元链接-专业版
cylink.Pro
次元链接-文档中心
cylink.wiki

本站临时域名如下：
HorizonJapan.net
HorizonJapan.cloud
HorizonJapan.network

思路，加载一个，video 播放器，然后通过 canvas 画布drawImage 方法将video元素 生成图像

如果需要上传图片到后面保存也是可以的，如下是一个我在工作中实际写的代码，仅作为参考：


    //获取视频封面
    function getVideoImage(blobUrl, call) {
        var video = $("#video-screenshot");
        if (video.length<1) {
            video = $('<video style="height: 0; width: 0;" id="video-screenshot">').appendTo("body");
            video[0].addEventListener('loadeddata', function(e) {
                // console.log(e);
                this.width = this.videoWidth;
                this.height = this.videoHeight;
                this.currentTime = this.duration > 10 ? 10 : this.duration/2;
                // this.play();
                // this.pause();
                var _this = this;
                setTimeout(function () {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    canvas.width = _this.width;
                    canvas.height = _this.height;
                    ctx.drawImage(_this, 0, 0, canvas.width, canvas.height);
                    var image = {
                        width: _this.width,
                        height: _this.height,
                        currentTime: _this.currentTime,
                        duration: _this.duration
                    };
                    canvas.toBlob(function(blob) {
                        image.blob = blob;
                        image.url = URL.createObjectURL(blob);
                        typeof call == 'function' ? call.call(this, image) : '';
                    });
                }, 300);
            });
        }
        video[0].pause();
        video[0].src = blobUrl;
    }



    //选择封面图
    $("#choose-image").click(function (e) {
        var $this = $(this), image = $("#preview-image")[0], blob = image.blob, filename = image.filename;
        var filenamearr = filename.split('.');
        filenamearr.splice(-1);
        var url = '/upload';
        var formData = new FormData();
        formData.append('filedata', blob, filenamearr.join(',')+'.jpg');
        formData.append("moredata", '其他字段可添加');
        //上传图片
        $this.prop('disabled', true);
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (res) {
                $this.prop('disabled', false);
                //成功
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $this.prop('disabled', false);
                console.error('上传封面图出错', textStatus, errorThrown);
            }
        });
    });


    $("#files").change(function (event) {
        if (!event.target.files[0]) return;
        if (event.target.files[0].type.indexOf('video/') != 0) return simpleDialog({msg: '请选择视频文件'});

        //自动获取封面图
        var blobUrl = URL.createObjectURL(event.target.files[0]);
        getVideoImage(blobUrl, function(image) {
            $("#preview-image").attr('src', image.url);
            $("#preview-image")[0].blob = image.blob;
            $("#preview-image")[0].filename = event.target.files[0].name;
            $("#preview-video").show();
        });

    });

HTML:

    <div class="form-group">
        <label class="required">视频文件 <span class="required">*</span></label>
        <input type="file" id="files" class="form-control"/>
        <div class="pre-video" id="preview-video" style="display: none;margin-top: 10px;">
            <image id="preview-image" style="width: 240px; height: 135px; display: inline-block;" />
            <button class="btn btn-default" id="choose-image" type="button" style="vertical-align: top;">选择此封面</button>
        </div>
        <p class="help-block">请上传1920*1080视频</p>
    </div>

前言

在开发过程中，偶尔会遇到这种场景，拿到一个数据后，你打算对它进行处理，但是你又希望拷贝一份副本出来，方便数据对比和以后恢复数据。

那么这就涉及到了 JS 中对数据的深浅拷贝问题，所谓深浅拷贝，浅拷贝的意思就是，你只是复制了对象数据的引用，并没有把内存里的值另外复制一份，那么深拷贝就是把值完整地复制一份新的值。

下面这篇文章就对js中的深浅拷贝进行了深入的讲解，下面话不多说了，来一起看看详细的介绍吧

问题描述：
因为在JavaScript中对象在赋值中存储的是对象的地址（指针），所以会造成对象类型在复制过程中只复制对象的地址，从而导致以下问题

var people = {
 name: "小明"
 }
var peoplea = people;
peoplea.name = "小白";
console.log(peoplea.name)//小白
console.log(people.name)//小白

我们本来期望只改变peoplea的name，现在连people的name都改变了。根据情况的不同，可使用深拷贝或浅拷贝来解决。
解决方法：
我们在实现深浅拷贝之前，我们先看一看深、浅拷贝、赋值这三种的区别：
1、赋值
改变新对象时不管第几层，老对象都会随着变化。

var people = {
 name: "小明",
 act: ["吃饭","睡觉"]
}
var people1 = people;//赋值
people1.name = "小红";
 people1.act[1] = "打游戏";
console.log(people.name);//小红
console.log(people.act);//["吃饭", "打游戏"]

2、浅拷贝
改变新对象第一层基本数据类型时，老对象不变。有子对象时，改变子对象，老对象会随着变化。

var people = {
  name: "小明",
  act: ["吃饭", "睡觉"]
}
var people1 = Object.assign({}, people);//浅拷贝
people1.name = "小红";
people1.act[1] = "打游戏";
console.log(people.name);//小明
console.log(people.act);// ["吃饭", "打游戏"]

3、深拷贝
不管改变新对象第几层，老对象都不会随之改变。

var people = {
  name: "小明",
  act: ["吃饭", "睡觉"]
}
var people1 = JSON.parse(JSON.stringify(people));//深拷贝
people1.name = "小红";
people1.act[1] = "打游戏";
console.log(people.name);//小明
console.log(people.act);// ["吃饭", "睡觉"]

总结一下就是：

第一层为基本数据类型 多于一层含有子对象
赋值 新老一起改变 新老一起改变
浅拷贝 新对象改变，老对象不变 新老一起改变
深拷贝 新对象改变，老对象不变 新对象改变，老对象不变
了解完了区别，下面介绍实现深浅拷贝的几个方法。
一、浅拷贝

1、Object.assign（）
官方对这个函数的介绍是：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。实际上就是会把属性中的简单数据类型直接复制，而对于对象属性，只会拷贝地址（指针）,上边介绍区别时用的就是这个；

var people1 = Object.assign({}, people);

需要注意的是，如果对象没有子对象，Object.assign（）实现的就是深拷贝。
2、展开运算符（ES6新增）

var people = {
  name: "小明",
  act: ["吃饭", "睡觉"]
}
var people1 = {...people};
people1.name = "小红";
people1.act[1] = "打游戏";
console.log(people.name);//小明
console.log(people.act);// ["吃饭", "打游戏"]

3、自己写

var people = {
 name: "小明",
 act: ["吃饭", "睡觉"]
}
var people1 = shallowCopy(people);
people1.name = "小红";
people1.act[1] = "打游戏";
console.log(people.name);//小明
console.log(people.act);// ["吃饭", "打游戏"]
function shallowCopy(obj) {
 var res = {};
 for (var index in obj) {
 if (obj.hasOwnProperty(index)) {//不复制原型链上的属性
  res[index] = obj[index];
 }
 }
 return res;
}

二、深拷贝
1、JSON.parse(JSON.stringify(obj))
上边介绍区别时用的就是这个：

var people1 = JSON.parse(JSON.stringify(people));//深拷贝

这个方法比较简便但也存在问题
1、不能复制对象中的函数。
2、会忽略对象中的undefind。
2、lodash函数
官方介绍是：lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。官网是
www.lodashjs.com/ ，我推荐用其中的_.cloneDeep(value)方法。

ar objects = [{ "a": 1 }, { "b": 2 }];
  
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

还有自己去写一个递归，但是需要考虑的东西较多，不再赘述，也有用jq的$.extend（）方法实现的，但是性能不好，这里提一下。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

DELETE FROM pre_table WHERE id in (
SELECT b.id FROM pre_table b
INNER JOIN (SELECT title, COUNT(1) total, MIN(id) as mid FROM pre_table GROUP BY title ORDER BY total desc ) t on t.title = b.title
WHERE t.total>1 AND b.id != t.mid
)

git reset --hard和git clean -f是一对好基友
结合使用他们能让你的工作目录完全回退到最近一次commit的时候

git clean 从工作目录删除所有没有tracked过的文件

reset只影响被track过的文件, 所以需要clean来删除没有track过的文件
结合使用这两个命令能让你的工作目录完全回到一个指定的的状态

用法

git clean -n

是一次clean的演习, 告诉你哪些文件会被删除. 记住他不会真正的删除文件, 只是一个提醒

git clean -f

删除当前目录下所有没有track过的文件. 他不会删除.gitignore文件里面指定的文件夹和文件, 不管这些文件有没有被track过

git clean -f

删除指定路径下的没有被track过的文件

git clean -df

删除当前目录下没有被track过的文件和文件夹

git clean -xf

删除当前目录下所有没有track过的文件. 不管他是否是.gitignore文件里面指定的文件夹和文件

git clean对于刚编译过的项目也非常有用.
能轻易删除掉编译后生成的.o和.exe等文件.
这个在打包要发布一个release的时候非常有用

下面的例子要删除所有工作目录下面的修改, 包括新添加的文件. 假设你已经提交了一些快照了, 而且做了一些新的开发

git reset --hard
git clean -df

  1. 1
  2. ...
  3. 106
  4. 107
  5. 108
  6. 109
  7. 110
  8. 111
  9. 112
  10. ...
  11. 141