@dinofe/xt-core

# rotateImage() function

旋转图片（沿顺时针非任意角度）

Signature:

export declare function rotateImage(image: HTMLImageElement | HTMLCanvasElement | string, degree?: number): Promise<unknown>;

# Parameters

Parameter	Type	Description
image	HTMLImageElement \| HTMLCanvasElement \| string	要旋转的图片（可以是元素、
degree	number	(Optional) 要旋转的角度（按顺时针，只能是：0/90/180/270/360）

Returns:

Promise<unknown>

返回一个HTMLCanvasElement (opens new window)元素

# Remarks

使用CanvasRenderingContext2D.rotate() (opens new window) 旋转图片

# Example 1

顺时针旋转<img>元素90°

import { rotateImage } from '@dinofe/xt-core/web'
const imageEl = document.getElementById('image')
rotateImage(imageEl, 90).then(canvas => {
 console.log(canvas)
 // 可以调用canvas.toBlob() cavnas.toDataURL()方法获取旋转后的图片数据
})

# Example 2

顺时针旋转<canvas>元素180°

import { rotateImage } from '@dinofe/xt-core/web'
const imageCanvas = document.getElementById('canvas')
rotateImage(imageCanvas, 180).then(canvas => {
 console.log(canvas)
 // 可以调用canvas.toBlob() cavnas.toDataURL()方法获取旋转后的图片数据
})

# Example 3

顺时针旋转图片链接270°

import { rotateImage } from '@dinofe/xt-core/web'
rotateImage('https://s.cn.bing.net/th?id=OHR.PersepolisRelief_ZH-CN4910990690_1920x1080.webp&qlt=50', 270).then(canvas => {
 console.log(canvas)
 // 可以调用canvas.toBlob() cavnas.toDataURL()方法获取旋转后的图片数据
})

rotateImage() function