html5图片自动缩放 html5怎么缩小图片

转载

mob6454cc6e8f43 2023-07-21 17:52:17

文章标签 html5图片自动缩放 html5上传裁剪图片大小缩放上传腾讯云 文章分类 HTML5 移动开发

image-process-tools

Image pre processing for upload (html5 + canvas)

解决图片上传前缩放到一定比例自动居中裁剪、等比缩放等。

Create by capricorncd / 2017-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表单上传
* 或直接通过如腾讯云接口直接上传，如下：
*/
/**
* 腾讯云上传实例，详见腾讯云文件上传文档
* https://www.qcloud.com/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);
}
});
}
}
}

使用效果图

html5图片自动缩放 html5怎么缩小图片_html5图片自动缩放