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前台压缩图片并上传到服务器的更多相关文章

  1. 微信小程序压缩图片并上传到服务器(拿去即用)

    这里注意一下,图片压缩后的宽度是画布宽度的一半 canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下 这是单张图片压缩,多张的压缩暂 ...

  2. 使用canvas压缩图片 并上传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5裁剪图片并上传至服务器实现原理讲解

    HTML5裁剪图片并上传至服务器实现原理讲解   经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...

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

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

  5. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  6. Xamarin.Android 压缩图片并上传到WebServices

    随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出 ...

  7. js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...

  8. html5压缩图片并上传

    手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3 代 ...

  9. javaScript:压缩图片并上传

    html代码: <input id="file" type="file" name="filesName"> js代码: var ...

随机推荐

  1. python记录

    1. 序列的分片操作:需要提供两个索引作为边界,第1个索引的元素包含在分片内,第2个索引的元素不包含在分片内. 为了能让分片部分能够包含列表的最后一个元素,必需提供最后一个元素的下一个元素所对应的索引 ...

  2. @NotNull丶@NotBlank丶@NotEmpty

    1.@NotNull:不能为 Null,但是可以为Empty:用在基本数据类型上. @NotNull(message="{state.notnull.valid}", groups ...

  3. jquery mobile 按钮部件(包含图标的使用)

    参考网址:http://api.jquerymobile.com/1.3/button/ 注:按钮的三种写法 <a href="#" class="ui-btn u ...

  4. explode 结合 str_replace对获取的URL处理手记

    今天更新我的一个FKQQ的程序.我的一个PHP文件接收到HQ的QQ号码的字符串.因为获取的内容有大量的垃圾内容所以我用str_replace做了一个处理代码如下: $xx1 = preg_replac ...

  5. MVC 中集成 AngularJS1

    在 ASP.NET MVC 中集成 AngularJS(1)   介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 R ...

  6. Git之detached HEAD

    今天遇到了和CSDN上博主相同的问题,就是使用git -branch -a 发现自己处于一个零时的分支上.这篇博文写的不错,转载记录一下. 转载:http://blog.csdn.net/lili62 ...

  7. 关于Adapter

    ArrayAdapter------------>单一值 SimpleAdapter---------->HashMap<String,Object> 多值 BaseAdapt ...

  8. 【HDOJ】1057 A New Growth Industry

    纯粹的模拟题目. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 20 # ...

  9. 2014-07-23 .NET实现微信公众号接入

    今天是在吾索实习的第11天.今天我跟我的实习小组的组员们,解决了关于使用ASP.NET进行微信公众号接入的问题.因为我们小组成员也是刚接触微信公众号的二次开发,所以在解决该问题的工程中也走了不少弯路. ...

  10. HDU 5506 - BestCoder Round #60 - GT and set

    题目链接 : http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=641&pid=1003 题意 : 给N集 ...