vant 上传图片加水印，并处理ios上传图片旋转问题
首先
npm i exif-js -S
组件中引入
import EXIF from ‘exif-js’
<van-uploader v-model=”fileList”
:after-read=”afterRead”
:max-count=”parseInt(1)”
:capture=”String(‘camera’)”>
<van-icon name=”photograph”
color=”#dcdee0″
size=”24px” />
</van-uploader>
afterRead (file) { // 拍照
var _this = this
_this.imgPreview(file)
setTimeout(() => {
_this.imgSvg(_this.preImg)
}, 800)
},
imgPreview (file) { // 处理旋转问题
var _this = this
let canvas = document.createElement(‘canvas’)
let ctx = canvas.getContext(‘2d’)
let image = new Image()
// image.crossOrigin = ‘Anonymous’
var Orientation = ”
image.onload = function () {
canvas.height = image.height
canvas.width = image.width
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
// 修复ios拍照旋转
EXIF.getData(image, function () {
EXIF.getAllTags(this)
Orientation = EXIF.getTag(this, ‘Orientation’)
})
// if (navigator.userAgent.match(/iphone/i)) {
if (Orientation !== ” && Orientation !== 1) {
switch (Orientation) {
case 6: // 需要顺时针（向左）90度旋转
_this.rotateImg(this, ‘left’, canvas)
break
case 8: // 需要逆时针（向右）90度旋转
_this.rotateImg(this, ‘right’, canvas)
break
case 3: // 需要180度旋转
_this.rotateImg(this, ‘right’, canvas) // 转两次
_this.rotateImg(this, ‘right’, canvas)
break
}
}
let dataURL = canvas.toDataURL(‘image/jpeg’, 0.1)
_this.preImg = dataURL
}
image.src = file.content
},
imgSvg (file) { // 加水印
let _this = this
let canvas = document.createElement(‘canvas’)
let ctx = canvas.getContext(‘2d’)
let image = new Image()
image.onload = function () {
canvas.height = image.height
canvas.width = image.width
if (image.width >= 3456) {
_this.watermarkOptions.fontSize = ‘100px’
} else if (image.width <= 1436) {
_this.watermarkOptions.fontSize = ’50px’
} else {
_this.watermarkOptions.fontSize = ’70px’
}
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
ctx.font = `${_this.watermarkOptions.fontSize} Arial`
ctx.fillStyle = ‘white’
_this.watermarkOptions.text = _this.formatTime(new Date(), ‘Y-M-D h:m:s’)
let addressL = _this.watermarkOptions.address
ctx.textAlign = ‘end’
ctx.textBaseline = ‘middle’
ctx.shadowBlur = 10
ctx.shadowOffsetX = 10
ctx.shadowOffsetY = 10
ctx.shadowColor = ‘black’
let column = Math.ceil(addressL.length / 16)
ctx.fillText(`${_this.name}`, image.width * 0.2, 120)
ctx.fillText(`${_this.watermarkOptions.text}`, image.width – 40, image.height – ((column + 1) * 120))
// 一排*多20个字
if (addressL.length > 16) {
for (let i = 0; i <= column; i++) {
ctx.fillText(`${addressL.substr(i * 20, 20)}`, image.width – 40, image.height + 120 * (i – column))
}
}
let dataURL = canvas.toDataURL(‘image/jpeg’, 1)
_this.fileList[0].content = dataURL
_this.preImg = dataURL
}
image.src = file
},
rotateImg (img, direction, canvas) { // 对图片旋转处理
// alert(img);
// *小与*大旋转方向，图片旋转4次后回到原方向
var minStep = 0
var maxStep = 3
// var img = document.getElementById(pid);
if (img == null) return
// img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height
var width = img.width
// var step = img.getAttribute(‘step’);
var step = 2
if (step == null) {
step = minStep
}
if (direction === ‘right’) {
step++
// 旋转到原位置，即超过*大值
step > maxStep && (step = minStep)
} else {
step–
step < minStep && (step = maxStep)
}
// 旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180
var ctx = canvas.getContext(‘2d’)
switch (step) {
case 0:
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0)
break
case 1:
canvas.width = height
canvas.height = width
ctx.rotate(degree)
ctx.drawImage(img, 0, -height)
break
case 2:
canvas.width = width
canvas.height = height
ctx.rotate(degree)
ctx.drawImage(img, -width, -height)
break
case 3:
canvas.width = height
canvas.height = width
ctx.rotate(degree)
ctx.drawImage(img, -width, 0)
break
}
},
let dataURL = canvas.toDataURL(‘image/jpeg’, 0.1)
toDataURL：
canvas.toDataURL(type, encoderOptions);
参数
type 可选
图片格式，默认为 image/png
encoderOptions 可选
在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
