图片:

        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. [NOIP模拟测试9]题(Problem) 题解 (组合数全家桶+dp)

    达哥送分给我我都不要,感觉自己挺牛批. $type=0:$ 跟visit那题类似,枚举横向移动的步数直接推公式: $ans=\sum C_n^i \times C_i^{\frac{i}{2}} \t ...

  2. sklearn中standardscaler中fit_transform()和transform()有什么区别,应该怎么使用?

    在根据机器学习书中提供的实例中,看到需要对训练和测试的特征数据进行标准化. 但是使用的是有两个函数, 对于训练数据,使用的是fit_transform()函数 对于测试数据,使用的是tansform( ...

  3. Django框架(八)—— 模板层:模板导入、模板继承、静态文件

    目录 模板导入.继承.静态文件 一.模板导入 1.语法 2.使用 二.模板的继承 1.使用模板的继承 2.强调(注意点) 三.静态文件 1.在配置文件settings中配置过静态文件 2.导入使用静态 ...

  4. 【一】Jmeter接口自动化测试系列之参数化方法

    Jmeter作为虽然作为一款和LoadRunner相媲美的性能测试工具,但参数化功能实在不咋地,这里我大概总结了一下Jmeter的参数化方法! 至于参数化的用途,我这里就不多说了,做测试的都明白吧!本 ...

  5. Haproxy 基础详解及动静分离配置

    haproxy 介绍 1 工作在ISO 七层 根据http协议(或者工作在ISO四层 根据tcp协议) 提供web服务的负载均衡调度器 负载均衡调度器分类 工作在四层: # lvs 工作在七层: # ...

  6. 拓展KMP求回文串

    题目:hdu3613: 题意:有26字母对应的价值,然后给出以个串,把它分成两段字串,如果字串是回文串,串的价值就是每个字符和,不是就为0.求最大价值. 博客 分析:拓展KMP的应用求回文字串. #i ...

  7. LNMP之PHP

    PHP LNMP环境下的PHP安装 CGI指的是通用网关接口,为HTTP服务器与其他机器上的程序服务通信交流的一种工具,性能差,所以被淘汰了. FastCGI,是一个可以伸缩.高速的在HTTP服务器和 ...

  8. CR0 - CR4 ,5个寄存器,留念,每次都要翻手册,太费事了

  9. 【第十周读书笔记】读node入门,一本全面的node.js教程

    我学到了路由的定义,路由就是解析URL然后转到相应的执行程序. 我们要为路由提供请求的URL和其他需要的GET及POST参数,随后路由需要根据这些数据来执行相应的代码(这里“代码”对应整个应用的第三部 ...

  10. docker gitlab backup

    说明:下面命令中带有<your container name>字,是 gitlab 容器的名称,请按实际情况进行代替 在创建备份之前,你不需要停止任何东西 docker exec -t & ...