How to rotate images using HTML5 canvas? (Example demonstration)
Oct 20, 2020 pm 05:38 PM
Recently, I suddenly wanted to study the function of rotating images in js. I won’t talk about the previous implementation methods first. HTML5 is very good now. Let’s mainly understand the image rotation in HTML5.
Example demonstration:
http://www.imqing.com/demo/rotateImg.html
Principle: Use canvas object to rotate.
Implementation method: First create a canvas element, and then draw the img element into the canvas. However, in fact, this is the default situation, when the image is not rotated. If the picture needs to be rotated 90 degrees, you need to rotate the canvas 90 degrees before drawing.
The description is as follows:
The internal rotation principle is like this. The coordinates of the picture are calculated from the upper left corner. To the right is the positive x direction, and down is the positive y direction. When rotating the canvas When, the coordinates are actually rotating, so the final drawing method is different.
At that time, I also used picpick to measure the coordinates of the starting point after rotating a certain angle, and then I realized that the original rotation was like this.
Code:
<body>
<button onclick="rotateImg('testImg', 'left')">向左旋轉(zhuǎn)</button>
<button onclick="rotateImg('testImg', 'right')">向右旋轉(zhuǎn)</button><br/>
<img src="./test.jpg" id="testImg"/>
<script>
function rotateImg(pid, direction) {
//最小與最大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)4次后回到原方向
var min_step = 0;
var max_step = 3;
var img = document.getElementById(pid);
if (img == null)return;
//img的高度和寬度不能在img元素隱藏后獲取，否則會出錯
var height = img.height;
var width = img.width;
var step = img.getAttribute('step');
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋轉(zhuǎn)到原位置，即超過最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
img.setAttribute('step', step);
var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
}
//旋轉(zhuǎn)角度以弧度值為參數(shù)
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}
</script>
</body>Explanation: There is no need to explain canvas.width and height, it should be. You shouldn’t need to rotate, right? The key is drawImage(img, x, y);
x and y refer to the point from which to start drawing. Because the entire coordinate system is rotated, x and y are different. , for example step=1, the picture is rotated 90 degrees to the right, that is, the coordinate system is rotated 90 degrees, then the starting position should be x = 0, y= img.height
The above is the detailed content of How to rotate images using HTML5 canvas? (Example demonstration). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Understanding H5: The Meaning and Significance
May 11, 2025 am 12:19 AM
H5 is HTML5, the fifth version of HTML. HTML5 improves the expressiveness and interactivity of web pages, introduces new features such as semantic tags, multimedia support, offline storage and Canvas drawing, and promotes the development of Web technology.
Significant Goals of HTML5: Enhancing Web Development and User Experience
May 14, 2025 am 12:18 AM
HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur
What is Microdata? HTML5 Explained
Jun 10, 2025 am 12:09 AM
MicrodataenhancesSEOandcontentdisplayinsearchresultsbyembeddingstructureddataintoHTML.1)Useitemscope,itemtype,anditempropattributestoaddsemanticmeaning.2)ApplyMicrodatatokeycontentlikebooksorproductsforrichsnippets.3)BalanceusagetoavoidclutteringHTML
HTML5 Microdata: The best online tools
Jun 09, 2025 am 12:06 AM
ThebestonlinetoolsforHTML5MicrodataareGoogleStructuredDataMarkupHelperandSchema.org'sMarkupValidator.1)GoogleStructuredDataMarkupHelperisuser-friendly,guidinguserstoaddMicrodatatagsforenhancedSEO.2)Schema.org'sMarkupValidatorchecksMicrodataimplementa
HTML5: Goals in 2024
May 13, 2025 am 12:13 AM
HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur
HTML5: Transforming the Web with New Features and Capabilities
May 11, 2025 am 12:12 AM
HTML5transformswebdevelopmentbyintroducingsemanticelements,multimediacapabilities,powerfulAPIs,andperformanceoptimizationtools.1)Semanticelementslike,,,andenhanceSEOandaccessibility.2)Multimediaelementsandallowdirectembeddingwithoutplugins,improvingu
The Aims of HTML5: Creating a More Powerful and Accessible Web
May 14, 2025 am 12:18 AM
HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl
Goals of HTML5: A Developer's Guide to the Future of the Web
May 11, 2025 am 12:14 AM
The goal of HTML5 is to simplify the development process, improve user experience, and ensure the dynamic and accessible network. 1) Simplify the development of multimedia content by natively supporting audio and video elements; 2) Introduce semantic elements such as, etc. to improve content structure and SEO friendliness; 3) Enhance offline functions through application cache; 4) Use elements to improve page interactivity; 5) Optimize mobile compatibility and support responsive design; 6) Improve form functions and simplify verification process; 7) Provide performance optimization tools such as async and defer attributes.
