HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码:
<input id="fileOne" type="file" />
<input id="btnOne" value="上传到服务器" type="button"/>
<canvas id="canvasOne" width="1000" height="800"></canvas>
<script>
//读取本地文件
var inputOne = document.getElementById('fileOne');
inputOne.onchange = function () {
//1.获取选中的文件列表
var fileList = inputOne.files;
var file = fileList[0];
//读取文件内容
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
//将结果显示到canvas
showCanvas(reader.result);
}
}
var canvas = document.getElementById('canvasOne');
var ctx = canvas.getContext('2d');
//指定图片内容显示
function showCanvas(dataUrl) {
//加载图片
var img = new Image();
img.onload = function () {
//缩小图片
//ctx.scale(0.5, 0.5);
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = dataUrl;
}
//将Canvas图片数据上传到服务器
/*
* 图片格式说明,存储图片大小 png > jpg> jpeg
*/
$('#btnOne').on({
click: function () {
//1.获取canvas中的图片数据
//var data = canvas.toDataURL('image/jpeg',0.2);
var data = canvas.toDataURL('image/jpeg');
data = data.split(',')[1];
//数据格式转换
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
var blob = new Blob([ia], { type: 'image/jpeg' });
//2.提交到服务器
var fd = new FormData();
fd.append('file', blob); //提交到服务器
var xhr = new XMLHttpRequest();
xhr.open('post', '../ashx/upload.ashx', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = eval('(' + xhr.responseText + ')');
if (data.success == true) {
//上传成功
var imgName = data.msg;
alert(imgName);
} else {
alert(data.msg);
}
} else {
//alert(xhr.readyState);
}
}
xhr.send(fd);
}
}); </script>
2.后台代码:
/// <summary>
/// 接收二进制上传的图片
/// </summary>
/// <returns></returns>
public string UploadImg()
{
HttpRequest req = _Context.Request;
if (req.Files.Count > )
{
string newname = Guid.NewGuid().ToString() + ".jpg";
//接收二级制数据并保存
Stream stream = req.Files[].InputStream;
byte[] dataOne = new byte[stream.Length];
stream.Read(dataOne, , dataOne.Length);
FileStream fs = new FileStream(TempFile + newname, FileMode.Create, FileAccess.Write);
try
{
fs.Write(dataOne, , dataOne.Length);
}
finally
{
fs.Close();
}
return newname;
}
return "";
}
HTML5 Canvas前台压缩图片并上传到服务器的更多相关文章
- 微信小程序压缩图片并上传到服务器(拿去即用)
这里注意一下,图片压缩后的宽度是画布宽度的一半 canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下 这是单张图片压缩,多张的压缩暂 ...
- 使用canvas压缩图片 并上传
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5裁剪图片并上传至服务器实现原理讲解
HTML5裁剪图片并上传至服务器实现原理讲解 经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...
- HTML5 本地裁剪图片并上传至服务器(转)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...
- Xamarin.Android 压缩图片并上传到WebServices
随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出 ...
- js实现图片粘贴上传到服务器并展示
最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...
- html5压缩图片并上传
手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3 代 ...
- javaScript:压缩图片并上传
html代码: <input id="file" type="file" name="filesName"> js代码: var ...
随机推荐
- PHPCMSV9 更改后台地址
修改PHPCMS v9默认后台登录地址 1.修改admin.php文件名,并修改跳转地址写上完整路径2.修改 /phpcms/modules/admin/classes/index.php,把 pub ...
- phplib template说明
phplib template phplib有五大功能:将数据库驱动和对数据库操作完全分离:支持session:权限许可:模板:购物 车 说明:1.第一个简单的模板页first.html模板中的{ma ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- eclipse 新建servlet
在mac下的eclipse新建servlet报错: 解决一: --------------------------------- 解决二: 在右键项目名称中,打开 Properties->jav ...
- Visual Studio调试之避免单步跟踪调试模式
Visual Studio调试之避免单步跟踪调试模式 写完Visual Studio调试之断点进阶篇之后,想分享一下我常用的一些调试技巧,后面发现写之前,一些背景知识需要介绍一下. 下面是几篇今年2月 ...
- .NET MVC 插件化框架支持原生MVC的Area和路由特性
前面开放的源码只是简单的Plugin的实现,支持了插件的热插拔,最近晚上偶然想到,原生的MVC提供Areas和RouteAtrribute等路由特性标签,按照先前的做法,无法解析插件的路由特性和Are ...
- 对比iOS网络组件:AFNetworking VS ASIHTTPRequest
对比iOS网络组件:AFNetworking VS ASIHTTPRequest 作者 高嘉峻 发布于 2013年2月28日 | 7 讨论 分享到:微博微信FacebookTwitter有道云笔记邮件 ...
- iOS 摇一摇的实现-备用
- (void)viewDidLoad { [super viewDidLoad]; [[UIApplication sharedApplication] setApplicationSupports ...
- Boost编程之获取可执行文件的当前路径
#include <boost/filesystem/path.hpp> #include <boost/filesystem/operations.hpp> std::str ...
- 8.2.1.13 Multi-Range Read Optimization 多个range 读优化
8.2.1.13 Multi-Range Read Optimization 多个range 读优化 读记录使用一个range scan 在一个secondary index 可以导致很多的随机磁盘访 ...