image-process-tools
Image pre processing for upload (html5 + canvas)
解决图片上传前缩放到一定比例自动居中裁剪、等比缩放等。
Create by capricorncd / -03-13
使用方法
选择图片
var imgTools = new IPTS({
// 选择按钮id
elm: 'buttonId',
// 图片预览容器 id
// 容器height!=0
target: 'imgWrapper',
// 是否裁剪图片
// 为true时，必须同时设置width、height值大于0
crop: true,
// 缩放尺寸：crop为false或不配置此项
// 限制宽度缩放，则只需设置width值
// 限制高度缩放，则只需设置height值
// 若crop为false，同时也设置了width/height值，则只按width缩放，忽略height
width: 640,
height: 640,
// 是否转换图片格式
// false或不配置此项，则保留原图片格式
// 配置后，将所有格式图片转换为配置格式
// type值：'jpg', 'png'
// HTMLCanvasElement.toDataURL()不支持'gif', 'bmp'
// 文件格式为gif转换为png,bmp转换为jpg
// type: 'jpg'
success: function (res) {
console.log(res.data);
alert('图片文件读取&编码转换成功，\n请详见浏览器控制台！');
/**
* data:待上传的图像数据
* 可将data写入input[value]，利用form表单上传
* 或直接通过如腾讯云接口直接上传，如下：
*/
/**
* 腾讯云上传实例，详见腾讯云文件上传文档
* /document/product/436/8095
*/
// cos.uploadFile(
// successCallBack, // 上传成功回调函数
// errorCallBack, // 上传失败回调函数
// progressCallBack, // 上传进度回调函数
// bucket, // 腾讯云对象存储bucket目录
// '上传成功后的文件名.jpg', // 腾讯云目录文件夹+上传后的文件名
// data, // 图像文件数据
// 1 // 若bucket中有同名文件存在，是否覆盖
//);
},
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);
}
});
}
}
}
使用效果图
Options 参数
elm: 'buttonId' 选择图片按钮id(必须)
target: 'imgWrapper' 图片预览容器id(可选)
crop: true 是否裁剪图片(可选)为true时，必须同时设置width、height值大于0
裁剪规则: 图片缩放到一定比列(即一边等于设置值，另一边超出设置值部分裁去)，居中裁剪
图片尺寸与设置裁剪尺寸相同时，不做canvas重绘处理
width: 640 裁剪或缩放宽度为640px(可选)crop为false或不配置crop，则为缩放尺寸。
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'格式
如果觉得《html5 等比压缩图片 图片上传裁剪amp;等比缩放处理（html5+Canvas）》对你有帮助，请点赞、收藏，并留下你的观点哦！
