JS通过canvas获取旋转90度后的图片

本文主要是介绍JS通过canvas获取旋转90度后的图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

部分代码来自这里，若侵权，请联系我！

个人只使用了其中一种方法，已成功：

环境：H5 、vue3、vant4、js,

使用了vant4中的签名组件（ van-signature ），设计要求页面是横屏显示，但是由于canvas在组件内部，暂时没办法通过H5 document.getElementById 获取到canvas元素（组件旋转后，canvas的XY轴也需要修改，但是获取不到元素，就没有办法修改）。所以组件旋转放弃, 考虑签名组件生成图片后，再通过canvas旋转图片

代码如下：


<van-signature ref="sign" @submit="onSubmit" @clear="onClear" confirm-button-text=""/><div class="absolute bottom-20 left--6 rotate-90 origin-center flex items-center"><!--<div class="absolute bottom-5 left-5 flex items-center">--><van-button type="primary" @click="clear" round>擦除</van-button><van-button type="primary" @click="submit" round color="#2e99a4">完成并同意</van-button>
</div>
<canvas id="canvas"></canvas>

onSubmit(data) {
// 这里我使用的是vant4 中的签名组件，签名完成后返回值返回的就是base64格式的图片地址this.image = data.image// 获取到图片后使用canvas获取旋转90度后的图片const imgN = new Image()imgN.src = this.image // base64 imageconst canvas = document.getElementById('canvas')const context = canvas.getContext('2d')const cutCoor = {sx: 0,sy: 0,ex: 0,ey: 0,}imgN.onload = () => {const imgW = imgN.widthconst imgH = imgN.heightconst size = imgH//   常量大小 = imgH;canvas.width = size * 2canvas.height = size * 2cutCoor.sx = sizecutCoor.sy = size - imgWcutCoor.ex = size + imgHcutCoor.ey = size + imgWcontext.translate(size, size)context.rotate((Math.PI / 2) * 3)context.drawImage(imgN, 0, 0)const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)canvas.width = imgHcanvas.height = imgWcontext.putImageData(imgData, 0, 0)this.image = canvas.toDataURL('image/png')this.show = true}
},
onClear() {},
clear() {this.$refs.sign.clear()
},
submit() {this.$refs.sign.submit()
},

完整代码

<template><div class="page w-screen h-screen bg-red-200"><div class="absolute top-10 right-10" @click="back"><van-icon name="close" size="24"></van-icon></div><van-signature ref="sign" @submit="onSubmit" @clear="onClear" confirm-button-text=""/><div class="absolute bottom-20 left--6 rotate-90 origin-center flex items-center"><!--<div class="absolute bottom-5 left-5 flex items-center">--><img src="@/assets/image/clear-icon.png" class="w-5 h-5 object-cover mr-4 box-border" alt="" @click="clear"><van-button type="primary" @click="submit" round color="#2e99a4">完成并同意</van-button></div><canvas id="canvas" ref="canvas"></canvas></div>
</template><script>
import { useWindowSize } from '@vant/use'
import HNavBar from '@/components/HNavBar.vue'export default {components: { HNavBar },props: {},data() {return {image: '',}},computed: {},watch: {},beforeMount() {},async activated() {},mounted() {},methods: {onSubmit(data) {this.image = data.image// 获取到图片后使用canvas获取旋转90度后的图片const imgN = new Image()imgN.src = this.image // base64 imageconst canvas = document.getElementById('canvas')const context = canvas.getContext('2d')const cutCoor = {sx: 0,sy: 0,ex: 0,ey: 0,}imgN.onload = () => {const imgW = imgN.widthconst imgH = imgN.heightconst size = imgH//   常量大小 = imgH;canvas.width = size * 2canvas.height = size * 2cutCoor.sx = sizecutCoor.sy = size - imgWcutCoor.ex = size + imgHcutCoor.ey = size + imgWcontext.translate(size, size)context.rotate((Math.PI / 2) * 3)context.drawImage(imgN, 0, 0)const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)canvas.width = imgHcanvas.height = imgWcontext.putImageData(imgData, 0, 0)this.image = canvas.toDataURL('image/png')}},onClear() {},back() {this.$router.back()},clear() {this.$refs.sign.clear()},submit() {this.$refs.sign.submit()},},
}
</script><style lang="scss" scoped>
:deep .van-signature {width: 100%;height: 100%;box-sizing: border-box;
}:deep .van-signature__content {width: 100%;height: 100%;
}:deep .van-signature {padding: 0 !important;
}:deep .van-signature__content canvas {width: 100%;height: 100%;
}
</style>