標籤：create tco function ext math tle button this nbsp
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖片旋轉</title></head><body> <div> <input id="input" type="file" accept="image/*" onchange="show()"><br> <img id="img" src="" width="30%" alt="我是一張圖片"><br> <button onclick="myRotate()">旋轉</button> </div> <script> var base64=""; function show(){ var file=document.getElementById("input").files[0]; var reader=new FileReader(); reader.readAsDataURL(file); reader.onload=function(){ base64=this.result; document.getElementById("img").src=base64; } } function myRotate(){ debugger; var canvas=document.createElement("canvas"); var context=canvas.getContext("2d"); var img=new Image(); img.src=base64; img.onload=function(){ canvas.width=img.height; canvas.height=img.width; context.rotate(90*Math.PI/180);//順時針旋轉90° context.drawImage(img,0,-img.height,img.width,img.height); base64=canvas.toDataURL(); document.getElementById("img").src=base64; } } </script></body></html>
JS_利用Canvas進行圖片旋轉
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
