基本过程

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. 初涉Quartz

    1.首先需要导入包,必须导入的包如下:      quartz-1.8.5.jar  commons-logging.jar  spring-core-3.0.5.RELEASE.jar  sprin ...

  2. 操作XML-dom4j

    首先是到dom4j的官网dom4j文件包,下载之后解压如下所示. 在根目录中,找到dom4j-1.6.1jar包,加入到eclipse中的lib文件下,最后build path一下,即可使用相关的方法 ...

  3. day9笔记--文件操作

    文件操作  计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所周知,应用 ...

  4. xshell ftp报错:找不到匹配的outgoing encryption算法

    场景:由于登陆跳板机都是从采用密钥的方式进行登陆的,然后在传输文件的时候报错 报错信息: 解决方案: 点击属性--->选择aes256-ctr加密方式默认这里是没有选择的 再次连接就成功连接上去 ...

  5. python学习【第五篇】python函数 (二)

    一.装饰器 装饰器:本质就是函数,功能是为其它函数添加附加功能 装饰器的原则: 不修改被修饰函数的源代码 不修改被修饰函数的调用方式 装饰器的知识储备: 装饰器 = 高阶函数 + 函数嵌套 + 闭包 ...

  6. WPF中DPI的问题

    先搞清楚一下几个概念: DPI:dots  per  inch ,每英寸的点数.我们常说的鼠标DPI,是指鼠标移动一英寸的距离滑过的点数:打印DPI,每英寸的长度打印的点数:扫描DPI,每英寸扫描了多 ...

  7. .NET架构师必备知识

    .NET架构师,我归纳一下要学的知识: 成为优秀程序员,需要学好的知识: 1. 面向对象编程.UML画图.设计模式.代码重构 2. 常用ORM工具 3.  MVC,WCF,XMl, JQuery ,S ...

  8. LibSvm添加到Matlab

    1.下载libSVM工具包 http://pan.baidu.com/s/1bnGNTBT或者下载最新版的到http://www.csie.ntu.edu.tw/~cjlin/libsvm/ 2.解压 ...

  9. 对宽度的控制原则 git commit -a -m "M 1、完成less计算得出图片的均分布局;";git push origin master:master

    <script> import wepy from 'wepy' import api from '../api/api' export default class recharge ex ...

  10. MySql 批处理

    1. 批处理 批处理只针对更新(增,删,改)语句. MySql 的批处理默认是关闭的, 需要在 url 中配置参数: jdbc:mysal://localhost:3306/mydb1?rewrite ...