html5 比例压缩图片大小,HTML5图片canvas等比例缩放后上传

图片等比例缩放后上传

$(function () {

function decodeUnicode(str) {

return unescape(unescape(str.replace(/\\u/g, '%u')));

}

$("#pic").change(function () {

var _this = $(this)[0], _file = _this.files[0], fileType = _file.type;

console.log(_file.size);

console.log(_file.type)

if (/image\/\w+/.test(fileType)) {

var fileReader = new FileReader();

fileReader.readAsDataURL(_file);

fileReader.onload = function (event) {

var result = event.target.result; //返回的dataURL

var image = new Image();

image.src = result;

image.onload = function () { //创建一个image对象，给canvas绘制使用

var cvs = document.createElement('canvas');

var scale = 1;

var tt = 1000; //只是示例，可以根据具体的要求去设定

if (this.width > tt || this.height > tt) {

if (this.width > this.height) {

scale = tt / this.width;

} else {

scale = tt / this.height;

}

}

cvs.width = this.width * scale;

cvs.height = this.height * scale; //计算等比缩小后图片宽高

var ctx =