1. 效果

演示地址：https://www.albertyy.com/2020/8/rotateImg.html

2. canvas

关于canvas的使用我在这篇文章 https://blog.csdn.net/qq_23853743/article/details/107434946 中有简单的介绍，可以看一下。

3. 代码实现

<!DOCTYPE html>
<html><head><title>图片旋转：公众号AlbertYang</title></head><style type="text/css">#content {width: 800px;height: auto;margin: auto;}img {width: 100%;}input {width: 150px;height: 30px;}button {width: 60px;height: 30px;cursor: pointer;}.canvasbox canvas {width: 100%}</style><body><div id="content"><div class="imgbox"><img id="img" src="./img/image_20200813.jpg"></div><div><input type="number" id="number" name="" placeholder="输入旋转角度"><button onclick="drawImg()">draw</button></div><div class="canvasbox" width="800px"><img id="testimg" /></div></div></body><script type="text/javascript">function drawImgToCanvas(image, rotate) {var testImg = document.getElementById('testimg')var canvas = document.createElement("canvas");var context = canvas.getContext('2d')var img = new Image();console.log(60);img.setAttribute('crossOrigin', 'Anonymous')img.src = image.src;img.onload = function() {canvas.width = img.height;canvas.height = img.width;context.translate(canvas.width / 2, canvas.height / 2)context.rotate(rotate * Math.PI / 180)context.translate(-canvas.width / 2, -canvas.height / 2)context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2)context.translate(canvas.width / 2, canvas.height / 2)context.rotate(-rotate * Math.PI / 180)context.translate(-canvas.width / 2, -canvas.height / 2)context.restore()var base64 = canvas.toDataURL("image/jpeg", 0.9);testImg.src = base64;console.log('base64', base64);};}function drawImg() {var image = document.getElementById('img');var rotate = document.getElementById('number').value * 1;drawImgToCanvas(image, rotate);}</script>
</html>

使用canvas把照片旋转任意角度相关推荐

JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句收藏我要投稿引入下方的jquery.rotate.js文件,然后通过 ...
JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
PDF任意页旋转任意角度
使用软件:Adobe Acrobat Pro DC.Enfocus PitStop Pro插件 1.打开PDF文件 2.在左侧选中右键可以旋转固定角度 3.如果要旋转任意角度,Alt+Ctrl+G ...
利用Matlab将任意曲线旋转任意角度
利用Matlab将任意曲线旋转任意角度公式计算数据 matlab代码结果公式计算对于如上图所示的任意曲线,需要绕固定点O旋转某一角度,取曲线上任意一点A计算旋转后的坐标值. 设OA的长度为L ...
opencv图片旋转关于中心旋转任意角度与坐标转换
如下例子,实现图片关于中心旋转任意角度,及坐标变换 import os import os.path import cv2 import numpy as np from math import co ...
c++实现图像旋转任意角度
图形图像处理-之-任意角度的高质量的快速的图像旋转上篇纯软件的任意角度的快速旋转 HouSisong@GMail.com 200 ...
matlab控制三角形绕原点旋转任意角度
项目中遇到一个问题,需要把正三角形绕原点旋转任意角度,平时操作图片的时候,顺便旋转,感觉好像很简单,但是自己去做的时候还是有些困难. 我觉得旋转的难点在于由原始点计算新的目标点上,因为你需要考虑点位于 ...
C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求需求是要实现给图片添加任意角度旋转的文字,文字的旋 ...
Qt QPixmap旋转任意角度
效果使用 QPixmap pix2 = rotateImageWithTransform(pix1, 30); 源码 // 旋转图片任意角度 QPixmap rotateImageWithTrans ...
c/c++实现图像旋转任意角度
旋转原理和旋转公式: 文章出处 https://blog.csdn.net/wonengguwozai/article/details/52049092 推导旋转公式: 旋转示意图有: tg(b)= ...

使用canvas把照片旋转任意角度

1. 效果

2. canvas

3. 代码实现

使用canvas把照片旋转任意角度相关推荐

最新文章

热门文章