基本过程

1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象.

2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上.

3) 通过 canvas.toDataURL("image/jpeg", 0.1); 方法, 将图片变成base64字符串, 传入服务端.

     var vueImg = new Vue({
el: "#divCarImages",
data: { model: { carId: '@carId', imageTitle:'',img64:'' }, images: [] },
methods: {
imageHandle: function () {
var fup = $("#fileImg")[0]; var img = fup.files[0]; var image = new Image();
var canvas = $("#canvas")[0];//document.createElement("canvas");
var ctx = canvas.getContext('2d'); image.onload = function () {
var w = image.naturalWidth,
h = image.naturalHeight; var toSize = 400;
canvas.width = toSize;
canvas.height = toSize; var w2 = toSize, h2 = toSize;
if (w > h) {
h2 = h / w * toSize;
} else {
w2 = w / h * toSize;
} ctx.drawImage(image, 0, 0, w, h, 0, 0, w2, h2); } // 判断是否图片
if (!img) {
return;
} // 判断图片格式
if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
alert('图片只能是jpg,gif,png');
return;
} var reader = new FileReader(); reader.onload = function (e) { // reader onload start
var url = reader.result;
image.src = url; } // reader onload end reader.readAsDataURL(img);
} }
});
     function uploadImg() {
var canvas = $("#canvas")[0];
vueImg.model.img64 = canvas.toDataURL("image/jpeg", 0.1);
//$("#testMsg").html(imgData.length); // ajax 上传图片
$.post("@Url.Content("~/AliOss/SaveCarImage")", vueImg.model , function (ret) { parseAjaxData(data, function (model) {
console.log(model.Path);
alert(model.Path);
$('#showimg').html('<img src="' + model.Path + '">');
})
}, 'json');
}

原文地址: http://www.cnblogs.com/ybst/p/6033199.html

HTML5 JS 压缩图片,并取得图片的BASE64编码上传的更多相关文章

  1. JS中使用base64编码上传下载文件

    下载文件:使用FileSaver.js   https://github.com/eligrey/FileSaver.js/blob/master/README.md 手机端UC浏览器无法下载  安卓 ...

  2. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  3. Js 将图片的绝对路径转换为base64编码

    转.... 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下:  var img = "https://img. ...

  4. Javascript 将图片的绝对路径转换为base64编码

    Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...

  5. 问题:C#将base64转换成二进制图片;结果:c# Base64编码和图片的互相转换代码

    c# Base64编码和图片的互相转换代码 Base64编码在Web方面有很多应用,譬如在URL.电子邮件方面.网上有很多相关的资源用于提供Base64编码和其他编码的转换,.Net Framewor ...

  6. node.js 在 Express4.0 框架使用 Connect-Busboy 实现文件上传

    node.js下四种post提交数据的方式 今天说分享的是其中一种,就是上传文件. Express 4.0 以后,将功能原子化,高内聚,低耦合,独立出了很多中间件 今天主要分享文件上传 对于conne ...

  7. 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题

    HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a ...

  8. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  9. canvas前端压缩图片和视频首屏缩略图并上传到服务器

    图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...

随机推荐

  1. Collection Set List 集合二

    Set List 都继承Collection Collection:元素之间没有顺序,允许重复和多个null元素对象. Set:元素之间没有顺序,不允许重复只能存一个null. List:元素之间有顺 ...

  2. 初探webpack之环境配置

    先感叹一句,前端的发展真是太快了,ng和bb还没怎么学好就要过时了.现在感觉react当是未来的一个大方向. 以前一直用的grunt,不过前段时间作者已经停止更新了.正好webpack风头正盛,咱也不 ...

  3. <转> 堆和栈的区别

    一.预备知识—程序的内存分配    一个由C/C++编译的程序占用的内存分为以下几个部分    1.栈区(stack)—   由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数 ...

  4. 【BZOJ2969】矩形粉刷 概率+容斥

    [BZOJ2969]矩形粉刷 Description 为了庆祝新的一年到来,小M决定要粉刷一个大木板.大木板实际上是一个W*H的方阵.小M得到了一个神奇的工具,这个工具只需要指定方阵中两个格子,就可以 ...

  5. Spring 事务机制详解(事务的隔离性和传播性)

    原文出处: 陶邦仁 Spring事务机制主要包括声明式事务和编程式事务,此处侧重讲解声明式事务,编程式事务在实际开发中得不到广泛使用,仅供学习参考. Spring声明式事务让我们从复杂的事务处理中得到 ...

  6. Linux考试题附答案

    一.选择题 1.在登录Linux时,一个具有唯一进程ID号的shell将被调用,这个ID是什么(B)? A.NID B.PID C.UID D.CID 2.下面哪个目录存放用户密码信息(B) A./b ...

  7. Python3.6全栈开发实例[022]

    22.完成彩票36选7的功能. 从36个数中随机的产生7个数. 最终获取到7个不重复的数据作为最终的开奖结果.随机数: from random import randintrandint(0, 20) ...

  8. Linux中的服务管理

    RPM包默认安装的服务 查看已安装的服务: chkconfig --list 默认安装位置: /etc/init.d 启动脚本 /etc/sysconfig 初始化环境配置文件 /etc  配置文件位 ...

  9. spring 编译时抱错纪录class path resource [spring/] cannot be resolved to URL because it does not exist

    class path resource [spring/] cannot be resolved to URL because it does not exist; 在 pom.xml 里添加如下代码 ...

  10. 方阵行列式并行化计算(OpenMP,MPI),并计算加速比

    00][100].在创建方阵时,方阵的阶数N(N<100)由外部输入.然后用两层"for循环"来给方阵 p左上角 N×N个位置赋值.具体实现如下: /* * 定义矩阵阶数N ...