html图片上传等比例压缩,图片上传前预处理，等比缩放、裁剪 (html5 + canvas)

本文作者：IMWeb capricorncd

未经同意，禁止转载

Image pre processing for upload (html5 + canvas)

解决图片上传前缩放到一定比例自动居中裁剪、等比缩放等。后期版本应该会加入手动设置裁剪位置及缩放比例。

处理完成后，将返回处理完成的数据，及原图片文件的大小、宽度、高度和Base64数据。(详见参数说明)

非图片文件将不做处理，返回文件数据data(name, lastModified, lastModifiedDate, size, type)等信息

使用方法

选择图片

// 选择按钮id

elm: 'buttonId',

// 图片预览容器 id,容器height!=0

target: 'imgWrapper',

// 是否裁剪图片。为true时，必须同时设置width、height值大于0

crop: true,

// 缩放宽高

width: 640,

height: 640,

// 处理后图片的格式，支持jpg、png格式

// type: 'jpg',

// 处理完成回调函数

success: function (result){

// 所有返回参数

console.log(result);

if (result.code === 0) {

console.log('裁剪或压缩后的图片数据:');

console.log(result.data);

console.log('处理后图片文件大小为：' + imgTools.conversion(result.size));

console.log('原图片数据:');

console.log(result.rawdata);

console.log('原图片文件大小为：' + imgTools.conversion(result.rawdata.size));

}

/**

* result.data //待上传的图像数据

* 可将result.data写入input[value]，利用form表单上传

* 或直接通过如腾讯云接口直接上传，如下：

*/

/**

* 腾讯云上传实例，详见腾讯云文件上传文档

* https://www.qcloud.com/document/product/436/8095

*/

},

// 图片处理进度

// progress {Number} 0-1范围

progress: function (progress){

// 显示进度的元素

document.getElementById('progressElm') = progress;

console.log(progress);

},

// 处理过程中的错误提示

error: function (err){

console.warn(err.msg);

}

});

Vue.js 2.0中使用

需异步初始化

import IPTS from './path/image-process-tools.min';

export default {

data () {

return {

// 待上传的文件数据

uploadData: null

}

},

created () {

this.$nextTick(() => {

this.initUploadData();

});

},

methods: {

// 图片选择按钮方法@click="selectImage"

selectImage () {

// 模拟 selectorFileBtn 被点击

let btn = document.getElementById('selectorFileBtn');

// 模拟input点击事件

let evt = new MouseEvent("click", {

bubbles: false,

cancelable: true,

view: window

});

btn.dispatchEvent(evt);

return false;

},

// 初始化上传数据

initUploadData () {

let vm = this;

let imgTools = new IPTS({

elm: 'selectorFileBtn',

target: 'imgWrapper',

crop: true,

width: 640,

height: 640,

success: (res) => {

// 存储数据，方便上传时读取

vm.uploadData = res.data;

},

error: (err) => {

console.warn(err.msg);

}

});

}

}

}

修改后的文件生成，并压缩：

npm run build

使用效果图

Options 参数

elm: buttonId 选择图片按钮id(必须)

target: imgWrapper 图片预览容器id(可选)

crop: true 是否裁剪图片(可选)

为true时，必须同时设置width、height值大于0

裁剪规则: 图片缩放到一定比列(即一边等于设置值，另一边超出设置值部分裁去)，居中裁剪

width: 640 裁剪或缩放宽度为640px(可选)

不配置crop，或crop为false时，则为缩放尺寸。

1.限制宽度缩放，则只需设置width值。

2.限制高度缩放，则只需设置height值。

3.若crop为false，同时设置了width/height值，则只按width缩放，忽略height

height: 640 裁剪或缩放高度为640px(可选)

type: jpg 上传图片目标格式,默认jpg/png(可选)

1.不配置此项，则保留原图片格式(bmp文件会转换成jpg, gif会转换为png)。

2.配置后，将所有格式图片转换为配置格式。

3.可选值'jpg', 'png'。

4.HTMLCanvasElement.toDataURL()不支持'gif', 'bmp'，均输出'png'格式

success: function(result){ console.log(result) } 图片处理完成后的回调函数

code: 0 成功代码

data: blobData 处理成功的图片数据，可直接上传至服务器，或赋值给input利用form表单提交。

element: canvas canvas节点对象

msg: success 成功消息

width: 640 处理完成的图片宽度

height: 640 处理完成的图片宽度

size: 21100 处理完成的图片文件大小

type: image/png 处理完成的图片类型

rawdata: Object 原图片相关属性(宽高/文件大小/Base64编码数据/类型/元素节点)

data: base64Data, 原图片base64格式数据

element: image, 原图片接到对象

height: 1200, 原图片高度

size: 215444, 原图片文件大小

type: image/png, 原图片格式

width: 2000 原图片宽度

progress: function(progress){ console.log(progress); } 图片处理据进度，范围0-1。仅对处理图片有效，非图片文件没有回调。

error: function(err){ alert(err.msg); } 处理过程中的错误或警告回调函数

部分接口

conversion(size) // 将size单位B转换为KB或M(大于1024KB则返回M)

getFileSuffix(fileName) // 获取文件后缀名

isImage(fileName) // 判断文件是否为图片格式

toBlobData(Base64Data, type) // 将图片base64数据转换为blob可上传的数据; type可选,默认与Base64Data类型相同,支持类型image/png, image/jpeg

返回code说明

成功code

code

msg

0

成功，程序正常完成整套流程，并返回最终结果

1

选中的文件非图片文件，返回选中文件数据data

错误code

code

msg

1

配置参数未配置或有误

2

配置图片选择按钮id

3

浏览器不支持addEventListener()

4

浏览器不支持FileReader接口，需升级或更换高版本的浏览器

5

未选中文件

6

选中的文件不是图片文件

7

文件读取错误

8

图片数据加载错误

9

当前图片文件尺寸小于裁剪尺寸