canvas前端压缩图片和视频首屏缩略图并上传到服务器
图片:
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前端压缩图片和视频首屏缩略图并上传到服务器的更多相关文章
- php 图片操作类,支持生成缩略图,添加水印,上传缩略图
<?php class Image { //类开始 public $originimage = ""; //源图片文件地址 public $image ...
- canvas前端压缩图片
参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)
web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- 前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器
之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端. 我的思路是:一.引用第三方js在前端把table转成图片 二.通过ajax把图片上传到服务器,保存在指定文件夹 ...
- HTML5 本地裁剪图片并上传至服务器(转)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器
MVC图片上传.浏览.删除 1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...
随机推荐
- XSS的原理分析与解剖:第四章(编码与绕过)*******************未看**********************
0×01前言 很抱歉,这第四章被我推了几个月,今天是元旦难得有空,就把第四章写下.我先把主要使用的编码说下,介绍完会说下绕过. 本文建议与<杂谈如何绕过WAF>一同阅读. 0×02 URL ...
- 网络数据包最大长度 MTU 分片 转发https://blog.csdn.net/singular2611/article/details/52513406
1.数据链路层对数据帧的长度都有一个限制,也就是链路层所能承受的最大数据长度,这个值称为最大传输单元,即MTU.以以太网为例,这个值通常是1500字节. 2.对于IP数据包来讲,也有一个长度,在IP包 ...
- svn向服务器添加新建文件夹
tip: 1)提交文件分为两步,先将要提交的文件加入缓存区,然后将文件提交 2)add:添加的意思.commit:提交的意思 第一步:加入缓存区(如图) 1)选择要提交的文件 2)右键svn---&g ...
- opencv bwlabel
int bwLabel(const Mat& imgBw, Mat& imgLabeled) { Mat imgClone = Mat(imgBw.rows + , imgBw.col ...
- Java oop 第13章_多线程
第13章_多线程 一. 多线程相关的概念: 程序:由某种编程语言开发可执行某些功能的代码组合,它是静态的概念. 进程:当程序被执行时的过程可以理解为讲程序从外存调入内存的过程,会为每一个程序 ...
- redis List相关命令
- redis String 相关命令
- nodejs 模板引擎ejs的简单使用(2)
test.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- mysqld_safe A mysqld process already exists
最近修改mysql密码遇到mysqld_safe A mysqld process already exists问题: 解决步骤: 1:ps aux |grep mysql 查看mysql的进程. ...
- Vue开发实战
递归组件 关键是组件在模板内能调用自身,关键是name属性 首先我们先定义数据格式 list: [ { title: '标题1' }, { title: '标题2', children: [ { ti ...