js canvas 照片旋转 demo详解编程语言

meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/ !--以手机屏幕为标准，禁止放大缩小-- meta name="format-detection" content="telephone=no"/ !--屏蔽IOS下自动转换数字为手机链接-- meta name="apple-mobile-web-app-capable" content="yes" / !--IOS应用模式，自动隐藏默认的工具栏和菜单栏-- meta name="browsermode" content="application" !--UC应用模式-- meta name="x5-page-mode" content="app" !--腾讯X5浏览器应用模式-- title 照片旋转 /title /head body input type="file" onchange="fileChangeEvent(this.files[0]);"/ br br img src="./1.jpg"/ br br canvas /canvas input type="button" value="90度"/ br br input type="button" value="180度"/ br br input type="button" value="270度"/ br br input type="button" value="返回"/ br br /body script type="text/javascript" var img = document.querySelector("img"); var canvas = document.querySelector("canvas"); var context = canvas.getContext(2d); var imgHeight = 200; var imgWidth = 200; img.onload = function(){ imgHeight = img.height; imgWidth = img.width; function fileChangeEvent(file){ var URL = window.URL || window.webkitURL; img.src = URL.createObjectURL(file); img.onload = function(){ imgHeight = img.height; imgWidth = img.width; function rotate90() img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题 canvas.width = imgHeight; canvas.height = imgWidth; context.translate(canvas.width * 0.5, canvas.height * 0.5); context.rotate(Math.PI * 0.5); context.translate(-canvas.height * 0.5, -canvas.width * 0.5); context.drawImage(img, 0, 0, imgWidth, imgHeight); img.src = canvas.toDataURL("image/png"); function rotate180() canvas.width = imgWidth; canvas.height = imgHeight; context.rotate(Math.PI); context.translate(-canvas.width, -canvas.height); context.drawImage(img, 0, 0, imgWidth, imgHeight); img.src = canvas.toDataURL("image/png"); function rotate270() img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题 canvas.width = imgHeight; canvas.height = imgWidth; // 以中心点为基准旋转，所有的旋转只改变了 canvas 画笔的坐标轴，对画布没有任何影响 context.translate(canvas.width * 0.5, canvas.height * 0.5); context.rotate(-Math.PI * 0.5); context.translate(-canvas.height * 0.5, -canvas.width * 0.5); context.drawImage(img, 0, 0, imgWidth, imgHeight); img.src = canvas.toDataURL("image/png"); document.querySelectorAll("input[type=button]")[0].onclick = function(){ rotate90(); document.querySelectorAll("input[type=button]")[1].onclick = function(){ rotate180(); document.querySelectorAll("input[type=button]")[2].onclick = function(){ rotate270(); document.querySelectorAll("input[type=button]")[3].onclick = function(){ history.back(); /script /html

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8789.html

cjava