vue头像加白边_vue，vue-avatar-tailor，vue头像裁剪组件 - SegmentFault 思否

上传图片

通过临时生成的img标签获取图片的大小信息(getImgSize函数的具体实现请参考源码)

比较原图长和宽，以其长边作为标准进行图片的缩放显示，让整张图显示在待裁剪区域中

以图片缩放后的短边作为选择框的宽，使裁剪框初始显示为最大可选范围

从而解决【裁剪框初始宽高】问题

// 选择图片

fileChange(event) {

const fileObj = event.target.files[0]

const reader = new FileReader()

reader.onload = () => {

const { selectData, containerBoxData } = this

this.imgURL = reader.result

this.getImgSize(this.imgURL).then((result) => { // 获取图片的大小

if (result.width > result.height) { // 350为外盒子宽高，比较原图长和宽，以其长边作为标准进行图片的缩放显示

this.scaleRate = 350 / result.width // 获取并记录图片缩放比

containerBoxData.width = 350

containerBoxData.height = Math.floor(result.height * this.scaleRate)

selectData.top = 0

selectData.left = (350 - containerBoxData.height) / 2 // 裁剪选择框居中显示

selectData.width = containerBoxData.height // 以图片缩放后的短边作为选择框的宽，使其显示为最大可选范围

} else {

this.scaleRate = 350 / result.height

containerBoxData.height = 350

containerBoxData.width = Math.floor(result.width * this.scaleRate)

selectData.left = 0

selectData.top = (350 - containerBoxData.width) / 2

selectData.width = containerBoxData.width

}

this.setPreview()

})

}

reader.readAsDataURL(fileObj)

},

遮罩镂空的效果实现思路如下

共通过三个元素重叠显示，原图img标签放在最底下，遮罩层.img-mask放在中间，裁剪区域.select-box放在最外层

.img-mask是遮住了整个img标签的，只是裁剪区域.select-box显示的内容刚好与原图上的一致。实现看起来遮罩被镂空的效果

其实遮罩并没有被镂空，只是遮罩上又多了一层图案，刚刚与原位置相同

裁剪区域.select-box，显示的内容和位置，通过background相关属性，background-position 和 background-size在实现