图片:

        var img = document.createElement('img')
img.src = window.URL.createObjectURL(fileObj.file)
// 加载图片成功
img.onload = function() {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
// 清除画布
canvas.width = size
canvas.height = size
context.clearRect(0, 0, size, size)
// 图片压缩
context.drawImage(img, 0, 0, size, size)
// canvas转为blob并上传
canvas.toBlob(function(blob) {
// 创建forme
var xhr = new XMLHttpRequest()
xhr.open('PUT', uploadSrc)// 注意跨域问题
xhr.send(blob)
xhr.onerror = function() {
return
}
}, 'image/png')
}

  size为自定义的大小,决定缩略图的大小。

createObjectURL方法后面传入的是文件对象,这里为图片的文件

video缩略图:
        var video = document.createElement('video')
video.src = window.URL.createObjectURL(fileObj.file)
// 加载图片成功
setTimeout(function () {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
// 清除画布
canvas.width = size
canvas.height = size
context.drawImage(video, 0, 0, size, size)
// canvas转为blob并上传
canvas.toBlob(function(blob) {
// 创建forme
var xhr = new XMLHttpRequest()
xhr.open('PUT', uploadSrc)// 注意跨域问题
xhr.send(blob)
xhr.onerror = function() {
return
}
}, 'image/png')
}, 500)

  此处要注意的是,多一个setTimeout方法,因为绝大部分视频的首屏都是黑屏,为了避免尴尬,让视频走500毫秒

整体要注意的是需要测试浏览器是否符合canvas和Blob对象的兼容性。如果后端需要传的是base64,则把canvas对象转成base64就行,canvas自身有转化的方法,具体请参考别的文章

canvas前端压缩图片和视频首屏缩略图并上传到服务器的更多相关文章

  1. php 图片操作类,支持生成缩略图,添加水印,上传缩略图

    <?php class Image {     //类开始     public $originimage = ""; //源图片文件地址     public $image ...

  2. canvas前端压缩图片

    参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  3. 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)

    web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...

  4. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  5. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  6. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  7. 前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器

    之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端. 我的思路是:一.引用第三方js在前端把table转成图片 二.通过ajax把图片上传到服务器,保存在指定文件夹 ...

  8. HTML5 本地裁剪图片并上传至服务器(转)

    很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...

  9. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

随机推荐

  1. Web移动端常见问题-摘抄

      一.按钮点击时出现黑色背景 解决方法: 1 2 .class { -webkit-tap-highlight-color:rgba(0,0,0,0);} .class { -webkit-appe ...

  2. SpringBoot项目框架下ThreadPoolExecutor线程池+Queue缓冲队列实现高并发中进行下单业务

    主要是自己在项目中(中小型项目) 有支付下单业务(只是办理VIP,没有涉及到商品库存),目前用户量还没有上来,目前没有出现问题,但是想到如果用户量变大,下单并发量变大,可能会出现一系列的问题,趁着空闲 ...

  3. node.js是用来做什么的

    Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.(事件驱动:事件触发过程中,进行决策的一种策略,简单说就是跟随当前时间点上出现的事物,调用可用的资源进行解决该事物,使得不 ...

  4. git分布式版本控制系统权威指南学习笔记(三):简单了解git对象、head以及sha1sum

    文章目录 git对象(简单了解) 对象是存在哪里的? head和master分支 上面的hash值怎么来的? git对象(简单了解) 每次提交都有tree.parent.author.committe ...

  5. ICPC Asia Nanning 2017 I. Rake It In (DFS+贪心 或 对抗搜索+Alpha-Beta剪枝)

    题目链接:Rake It In 比赛链接:ICPC Asia Nanning 2017 Description The designers have come up with a new simple ...

  6. svn向服务器添加新建文件夹

    tip: 1)提交文件分为两步,先将要提交的文件加入缓存区,然后将文件提交 2)add:添加的意思.commit:提交的意思 第一步:加入缓存区(如图) 1)选择要提交的文件 2)右键svn---&g ...

  7. jQuery片段 - 表单action的更改和提交

    //点击表单“提交”按钮 $("#submitBut").bind("click", function() { var url = "..." ...

  8. C# Windows服务相关

    代码及注释 ServiceController sc = new ServiceController("gupdatem"); sc.Stop();//停止服务 sc.Start( ...

  9. java-day24

    JDBC控制事务: 1.事务:一个包含多个步骤的业务操作,如果这个业务操作被事务管理,则这个步骤要么同时成功,要么同时失败. 2. 操作:         1. 开启事务         2. 提交事 ...

  10. 天道神诀--IPSAN实现多链路以及多路径安装

    # linux6 环境需求 ISCSI服务端: 2张网卡,足够的磁盘空间 iscsi客户端: 2张网卡(与服务端网段相同) ISCSI服务端配置: 与1张网卡配置主要差别在于配置文件中的允许访问网段, ...