JavaScript实现点击图片翻转效果
短信预约 -IT技能 免费直播动态提醒
最近在做一个有关人脸采集的项目，然后在编写前端模块时，遇到了一个问题，就是当客户上传照片或直接拍照上传时，会遇到有些图片可能会90度翻转过来所以，我们需要给个按钮客户让客户自己可以对照品进行旋转效果大致如下
图1.正常图片上传
图2.图片左旋转
图3.图片右旋转
以上就是一个图片旋转功能
下面我们就开始代码部分吧
这里我采取了一个方法，然后当前我的图片格式是base64,如果遇到其它格式也无所谓，因为我们最终的效果还是要转为image对象来实现的
rotate (direction) {
const img = new Image()
// 这里的思维就是，把图片映射到一个画板上，然后对图片进行重新绘制，所以这里要建一个canvas对象来充当我们的画板
const canvas = document.createElement('canvas')
// base64转换image对象
img.class="lazy" data-src = this.uploadImage
// 这里记得一定要在base64转换成图片对象后再进行其它操作，笔者在这里踩了个坑，onload方法就是图片加载再进行其它操作，如果图片是文件路径方式跨域调用效果更加明显
img.onload = () => {
// img的高度和宽度不能在img元素隐藏后获取，否则会出错
const height = img.height
const width = img.width
// 旋转角度以弧度值为参数
const ctx = canvas.getContext('2d')
if (direction === 'right') {
canvas.width = height
canvas.height = width
ctx.rotate(90 * Math.PI / 180)
ctx.drawImage(img, 0, 0, width, -height)
} else {
canvas.width = height
canvas.height = width
ctx.rotate(-90 * Math.PI / 180)
ctx.drawImage(img, 0, 0, -width, height)
}
// 旋转后的图片重新转为base64
this.uploadImage = this.getBase64Image(img, canvas)
}
},
getBase64Image (img, canvas) {
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
const ext = img.class="lazy" data-src.substring(img.class="lazy" data-src.lastIndexOf('.') + 1).toLowerCase()
return canvas.toDataURL('image/' + ext)
}注意：如果图片是跨域获取的话这里可能会使canvas转回base64出现问题，这时可能需要开启代理来进行图片获取
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
