直接进入正题
input type=file 是前端处理图片上传的必要途径 这里说一下
第一个需求 如果用户点击type=file的按钮 只想完成调用照相功能 而不用选取照片功能
其实 input type=file标签上还是有很多 特殊好玩的属性的 我们列举一下
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
/*
accept规定可通过文件上传控件提交的文件类型;
capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音。
*/
<input type="file" accept="image/*" >
<input type="file" accept="video/*" >
<input type="file" accept="audio/*" >
/*
如果不加上capture,则只会显示相应的，例如上述三种依次是：拍照或图库，录像或图库，
录像或拍照或图库，加上capture之后不会调用图库。
其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture，
所以只用写成：<input type="file" accept="image/*" multiple>就可以
*/当我们修改默认的capture的时候 就是默认调起什么方式了
不过我们单位的需求 是 只想选择相册 想关闭掉拍照的唤起 这里百度很多 其中 回复最多的是添加multiple属性
原理是 这个属性是要可以多张选择的 而你开启了多张选择 就会关闭掉照相了
不过我这里测试后 发现只有安卓生效 ios 微信内置无效 还是可以调用拍照功能
2 正题 如何进行压缩 和 旋转 这里我将方法进行了抽离 下面贴出代码
a. 利用EXIF 来进行是否需要旋转的确认
b. npm install exif-js -S 进行下载 （注意 不要下载成 exif了 很容易弄混 不过2个模块并不是一个功能）
c. 返回的内容是我写的 即result.flag是true 则需要通过Orientation去修正； false则无需处理
const EXIF = require('exif-js') // 引入
// vue method里的方法
isNeedFixPhoto(file){
return new Promise(function (resolve,reject) {
EXIF.getData(file, function() {
var Orientation = EXIF.getTag(this, 'Orientation');
if(Orientation && Orientation != 1){
//图片角度不正确
resolve({flag:true,Orientation:Orientation})
}else{
//不需处理直接上传
resolve({flag:false,Orientation:Orientation})
}
});
})
},
// 调用
const result=await this.isNeedFixPhoto(file);
d.利用 方法 将file文件 读成base64码
// 定义方法
file2Base64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (ev) {
resolve(ev.target.result);
}
})
},
// 方法调用
const resultBase64=await this.file2Base64(file);e. 结合上面2步 有了是否需要修正的判断 也有了文件的base64码 下面处理判断
// 整体修正方法
async repairPhoto(file,num,w){
const result=await this.isNeedFixPhoto(file);
const resultBase64=await this.file2Base64(file);
const Orientation = result.Orientation;
const numb = num || 1;
if(result.flag){ // 处理旋转
return await this.best4Photo(resultBase64,Orientation,numb,w)
}else{ // 不处理旋转
return await this.best4Photo(resultBase64,1,numb,w)
}
},
// 压缩处理选中的方法
best4Photo(resultBase64,Orientation,num,w){
return new Promise(function (resolve, reject) {
let image = new Image();
image.src = resultBase64;
image.onload = function () {
// var imgWidth = this.width,
// imgHeight = this.height; //获取图片宽高
var imgWidth = w,
imgHeight = w*this.height/this.width; //获取图片宽高
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = imgWidth;
canvas.height = imgHeight;
if(Orientation && Orientation != 1){
switch(Orientation){
case 6: // 旋转90度
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(Math.PI / 2);
ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
break;
case 3:// 旋转180度
ctx.rotate(Math.PI);
ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
break;
case 8: // 旋转-90度
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(3 * Math.PI / 2);
ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
break;
}
}else{
ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
}
const result = canvas.toDataURL("image/jpeg",num);
resolve(result)
}
})
},best4photo里 image.onload 是为了 当时想对图片不进行 尺寸的更改 只进行质量度的处理 但是后来总和考虑 还是利用外部参数去设定压缩后的图片尺寸 这里这个方法其实可以省略的
主要 switch 判断了要旋转的角度 然后利用canvas 重新旋转后绘制图片
canvas.toDataUrl 这个方法的第二个参数是用来处理 压缩质量的 可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略
这样我们就完成了图片的旋转和压缩的处理 虽然看似方法很多 但最后的目的 是为了 剥离代码 方便重复利用 其实代码上还有一些可以优化的地方 这里暂不做处理了
如果你觉得我帮到你了，买个肥宅快乐水，怎么样？哈哈哈哈哈哈
