javascript如何实现图片任意角度的旋转？

JavaScript023

javascript如何实现图片任意角度的旋转？,第1张

可以用JAvascript改变这个图片的css来旋转他：

这个是css代码：

img {

transform:rotate(7deg)

-ms-transform:rotate(7deg) /* IE 9 */

-moz-transform:rotate(7deg) /* Firefox */

-webkit-transform:rotate(7deg)/* Safari 和 Chrome */

-o-transform:rotate(7deg) /* Opera */

}

在JAvascript里面可以先获取到这张图片 设置图片id = "box"

var img = document.getElementById('box') 获取到这个图片并用变量记住

img.style.transform = "rotate(90deg)" 改变这个图片的css，旋转90度

完毕！！！

image-conversion 是一个简单易用的 JS 图片转换工具，提供了多种 Image、Canvas、File 和 dataURL 之间的转换方法。 另外，image-conversion 可以指定大小来压缩图片。 1、将图像压缩到 200kb： 2、以 0.9 的质量压缩图像 image-conversion 提供了多种方法来实现 Image、Canvas、File 和 dataURL 之间的转换，如下： 1、imagetoCanvas(image[, config]) {Promise(Canvas)} 将图像对象转换为画布对象。 2、dataURLtoFile(dataURL[, type]) {Promise(Blob)} 将 dataURL 字符串转换为 File(Blob) 对象，相当于把画布的内容转换成blob，type可以设置最终图片的格式。 type的值可以为："image/png", "image/jpeg", "image/gif" 3、compress(file, config) {Promise(Blob)} 压缩文件（Blob）对象。 4、compressAccurately(file, config) {Promise(Blob)} 根据大小压缩文件（Blob）对象。 5、canvastoDataURL(canvas[, quality, type]) {Promise(string)} 将 Canvas 对象转换为 dataURL 字符串，该方法可以进行压缩。 6、canvastoFile(canvas[, quality, type]) {Promise(Blob)} 将 Canvas 对象转换为 Blob 对象，此方法可以进行压缩。 7、dataURLtoImage(dataURL) {Promise(Image)} 将 dataURL 字符串转换为图像对象。 8、downloadFile(file[, fileName]) 下载图片到本地。 9、filetoDataURL(file) {Promise(string)} 将 File(Blob) 对象转换为 dataURL 字符串。 10、urltoBlob(url) {Promise(Blob)} 通过图像 url 加载所需的 Blob 对象。 11、urltoImage(url) {Promise(Image)} 通过图片 url 加载所需的 Image 对象。 觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧