HTML5 JS 压缩图片,并取得图片的BASE64编码上传
基本过程
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编码上传的更多相关文章
- JS中使用base64编码上传下载文件
下载文件:使用FileSaver.js https://github.com/eligrey/FileSaver.js/blob/master/README.md 手机端UC浏览器无法下载 安卓 ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- Js 将图片的绝对路径转换为base64编码
转.... 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var img = "https://img. ...
- Javascript 将图片的绝对路径转换为base64编码
Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...
- 问题:C#将base64转换成二进制图片;结果:c# Base64编码和图片的互相转换代码
c# Base64编码和图片的互相转换代码 Base64编码在Web方面有很多应用,譬如在URL.电子邮件方面.网上有很多相关的资源用于提供Base64编码和其他编码的转换,.Net Framewor ...
- node.js 在 Express4.0 框架使用 Connect-Busboy 实现文件上传
node.js下四种post提交数据的方式 今天说分享的是其中一种,就是上传文件. Express 4.0 以后,将功能原子化,高内聚,低耦合,独立出了很多中间件 今天主要分享文件上传 对于conne ...
- 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题
HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a ...
- js图片预览插件,不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- canvas前端压缩图片和视频首屏缩略图并上传到服务器
图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...
随机推荐
- (转)txt读写 操作封装
[code]csharpcode: using UnityEngine; using System.Collections.Generic; using System.IO; using System ...
- 回顾下WinMain
我们在学习标准C++的时候,都知道每个应用程序运行时都会先进入入口点函数main,而当从main函数跳出时程序就结束了.在Windows编程里面,也是一样的,只是我们的入口点函数不叫main,叫Win ...
- sql 分组后查询最大所有列信息
CREATE TABLE students (course varchar(10), stu_name varchar(10), city varchar(10), score int ) inser ...
- [读书笔记]JavaScript 闭包(Closures)
1. 什么是闭包? 参考MDN. 2. 闭包的使用示例 2.1 示例1 <div>1</div> <div>2</div> <div>3&l ...
- SCSS详解
SCSS入门 CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等 ...
- 位运算+引用+const+new/delete+内联函数、函数重载、函数缺省参数
update 2014-05-17 一.位运算 应用: 1.判断某一位是否为1 2.只改变其中某一位,而保持其它位都不变 位运算操作: 1.& 按位与(双目): 将某变量中的某些位(与0位与) ...
- 32位Win7下安装与配置PHP环境(一)
运行PHP网站,主要需要安装.配置三个软件,Apache.PHP和MySQL.如果需要编辑调试PHP程序,还要安装一个编辑调试软件. 一. Apache Apache是和IIS类似的一个软件,是运行在 ...
- MySQL多实例启动停止
原文地址:http://wolfword.blog.51cto.com/4892126/1241304/ 说明:本实验以MySQL 5.1为例来实验. 1.安装MySQL 5.1 yum instal ...
- 《UNIX网络编程》 -- 第六章
6.3 select 函数 给出描述符1.4.5而 maxfdp1 设置为6的原因: maxfdp1 是值-结果参数,这里传递的是描述符的范围,类似之前的 size_of(length).又因为描述符 ...
- Cookies with curl the command line tool
w https://curl.haxx.se/docs/http-cookies.html curl has a full cookie "engine" built in. If ...