HTML5 JS压缩图片并获取图片BASE64编码上传
作者:aC#Coder 发布时间:2024-04-17 10:25:44
标签:HTML5,JS,压缩,上传
本文实例为大家分享了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');
}
0
投稿
猜你喜欢
- 1.本人第一次学python做出来的,当时满满的成就感,当作纪念!!!!!非常简单,复制即可使用代码块import json#把字符串类型的
- 如果你电脑是Mac的,使用homebrew安装MySQL是一个非常便捷的方式,但是还是会出现一些问题;首先保证你已经安装了mysql,如果是
- 本文实例讲述了jQuery实现简单复制json对象和json对象集合操作。分享给大家供大家参考,具体如下:<!DOCTYPE html
- 上四篇的内容是把常用的XHTML标签拿出来介绍了一下,不是很详细。不过没关系,重点是要能先知道用他们,以后深入了再去细细研究更为详细的特性以
- 目录1、概述2、__new__ 和 __init__ 的区别3、应用1:改变内置的不可变类型4、应用2:实现一个单例5、应用3:客户端缓存6
- 区别:xx:公有变量,所有对象都可以访问;xxx:双下划线代表着是系统定义的名字。__xxx:双前置下划线,避免与子类中的属性命名冲突,无法
- sql的max之类的聚合函数只能针对同一列的n行运算,如果对n列运算,一般都用case 语句来判断,如果列少还比较容易写,列多了就麻烦了。-
- MySQL中模式就是数据库SHOW DATABASES;show databases;罗列所有数据库名称CREATE DATABASE &l
- 本文实例讲述了Python实现的概率分布运算操作。分享给大家供大家参考,具体如下:1. 二项分布(离散)import numpy as np
- 突发奇想,写了以下这段代码,感觉还不错,拿来和大家分享作用:查看页面布局使用方法:在页面底部包含以下这段代码ff3,ie7测试可用var&n
- 在用Pycharm运行项目时,不知道干了什么,导致运行后无法像平时那样显示输出结果:最后试了很多种方法,终于解决了:将打勾的地方去掉,不要运
- 本文实例讲述了Go语言使用sort包对任意类型元素的集合进行排序的方法。分享给大家供大家参考。具体如下:使用sort包的函数进行排序时,集合
- Go 中接口也是一个使用得非常频繁的特性,好的软件设计往往离不开接口的使用,比如依赖倒置原则(通过抽象出接口,分离了具体实现与实际使用的耦合
- 如何把[1, 5, 6, [2, 7, [3, [4, 5, 6]]]]变成[1, 5, 6, 2, 7, 3, 4, 5, 6]?思考:-
- FCKeditor是目前互联网上最好的在线编辑器,功能强大,支持IE 5.5+ (Windows), Fire
- 前言当需要将多张图像拼接成一张更大的图像时,通常会用到图片拼接技术。这种技术在许多领域中都有广泛的应用,例如计算机视觉、图像处理、卫星图像、
- python的变量与赋值1.变量的命名规则变量其实通过一个标记调用内存中的值,而变量名就是这个标记的名称,但是万一这个标记已经被提前占用或者
- 企业最有价值的资产通常是其数据库中的客户或产品信息。因此,在这些企业中,数据库管理的一个重要部分就是保护这些数据免受外部攻击,及修复软/硬件
- 概念第一步:计算一个梯度 Ix,Iy第二步:整合矩阵,计算特征值第三步:比较特征值的大小第四步: 非极大值抑制,把真正的角点留下来,角点周围
- python开发者向普通windows用户分享程序,要给程序加图形化的界面(传送门:这可能是最好玩的python GUI入门实例! http