成为VIP
一、阅读须知
小帅爆肝整理的这篇文章，内容比较多vue上传图片，帅帅的你值得看一看，有解决方案的核心代码，放到项目中可以直接使用。最近还会更新关于“图片横向合并、纵向合并、图片编辑”的另一篇文章，敬请期待！
二、解决的问题三、知识储备
使用标签得到的File文件格式对象如下
图片Base64编码的格式（可以直接使用
标签进行渲染）
四、解决方案
如果使用canvas实现对图片的旋转目前有两种方案
利用canvas的translate()平移函数+rotate()旋转函数+drawImage()函数实现，这种方式存在更复杂的数学计算问题
利用canvas的rotate()旋转函数+drawImage()函数实现（本篇使用的解决方案），下文提供代码案例
五、核心代码
// 创建canvas
const selfCanvas = document.createElement('canvas')
const selfCtx = selfCanvas.getContext('2d')
if (angle == '90') { // 顺时针旋转90度
selfCanvas.width = img.height
selfCanvas.height = img.width
selfCtx.rotate(90 * Math.PI / 180);
selfCtx.drawImage(img, 0, 0, img.width, -img.height)
} else if (angle == '180') { // 顺时针旋转180度
selfCanvas.width = img.width
selfCanvas.height = img.height
selfCtx.rotate(180 * Math.PI / 180)
selfCtx.drawImage(img, -img.width, -img.height, img.width, img.height)
} else if (angle == '270') { // 顺时针旋转270度
selfCanvas.width = img.height
selfCanvas.height = img.width
selfCtx.rotate(270 * Math.PI / 180)
selfCtx.drawImage(img, -img.width, 0, img.width, img.height)
} else { // 不进行任何旋转
selfCanvas.width = img.width
selfCanvas.height = img.height
selfCtx.drawImage(img, 0, 0, img.width, img.height)
}
六、参考资料
得到图片文件File的URL
img.src = URL.createObjectURL(imgFile)
相关api函数方法
在h5中，使用input的type=”file”和capture=”camera”这两个属性就可以调用摄像头
如果使用document.createElement()动态创建的元素，通过如下的方法得到输入的值
// 创建一个input元素
var inputElem = document.createElement("input");
// 获取input的值
var inputValue = inputElem.value;
// 如果input标签type="file"
// 得到文件对象File
var file = inputElem.files
如果input标签不是动态创建的，是已经写好的html元素，则可以在change=”methodsName(e)”，通过e.target.files获得文件对象
Vue中可以使用如下方式添加、移除事件
// 绑定事件 可以进行监听
addEventListener()
// 移除事件
removeEventListener()
关于标签中的webkitdirectory属性参考：
使用FormData对象上传文件
const formData = new FormData()
formData.append('file', File)
七、FileReader()对象
读取结果会存储在FileReader的result属性中，处理事件简介：
文件开始读取后无论成功失败都会填充result属性，读取失败result属性会赋值nullvue上传图片，否则会填充读取结果
onload读取成功之后，直接将base64赋值给img元素的src属性，就可以预览图片了
使用FileReader对象将File转成base64代码案例
// 图片file转base64方法（file文件，回调函数）
fileToBase64(file, callback) {
// 创建FileReader对象（不兼容IE）
let reader = new FileReader();
// 将file转为base64 （异步操作）
reader.readAsDataURL(file);
// 转换成功
reader.onload = () => {
const response = {
status: true,
data: reader.result
}
callback(response);
};
// 转换失败
reader.onerror = function () {
const response = {
status: false,
data: reader.error
}
callback(response);
};
}
// 调用方法
fileToBase64(imgFile, (res) => {
if(res.status) {
console.log('file转化成base64成功---',res.data)
} else {
console.log('file转化base64失败---',res.data)
}
})
八、Exif库使用
用Exif获取图像的原始数据，例如：拍照方向，拍摄事件，ISO感光度，GPS地理位置等数据
vue中引入exif-js
npm install exif-js --save
Exif提供的部分API方法
Exif的npm仓库地址：
Exif的GitHub地址：上述两个地址里面有使用参考文档
前端开发工具箱：
九、Canvas画布
canvas是一个容器（画布），他的getContext()方法用来获取一个对象，这个对象提供了在画布上绘图的方法和属性
菜鸟教程中关于canvas资料：
w3school中的canvas资料：
资料网站：
十、动态创建标签并添加绑定事件
var input = document.createElement('input');
input.setAttribute('value', '');
input.setAttribute('type', 'text');
input.setAttribute('class', 'my-custom-input');
document.body.appendChild(input);
//Change event listener
input.addEventListener('change', function(e) {
console.log('I just changed');
}, false);
十一、utils方法
从base64代码中获取图片的宽高
var i = new Image(); //创建一个临时存储
i.onload = function(){ //定义加载图片后弹出显示
alert( i.width+", "+i.height );
};
i.src = imageData //将图片数据赋值即可
base64转文件
dataURLtoFile(dataurl) {
var arr = dataurl.split(',')
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], 'image', {
type: 'image'
})
}
十二、vue中图片预览
使用远程的
标签
使用element-ui的标签
使用element-ui的
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
使用v-viewer库
十三、工具网站
base64转图片：
vue图片裁剪插件(vue-picture-cut 2.x)：
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
htebazile
