前言

在上一篇实现了 canvas实现压缩图片。现在有需求变了，需要将图片旋转，旋转后正确的显示图片的位置（不能被其他元素遮住），等比例显示图片。
简单的实现如下：
您可以点击：图片旋转

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片旋转</title>
</head>
<body><input type="file" name="" id="file"><input type="button" value="下载" id="download"><input type="button" value="逆时针旋转" id="leftRotate"><input type="button" value="顺时针旋转" id="rightRotate"><div>图片压缩比：<span id="ratio"></span></div><script>const fileEl = document.querySelector('#file')const ratioEl = document.querySelector('#ratio')const downloadEl = document.querySelector('#download')const leftRotateEl = document.querySelector('#leftRotate')const rightRotateEl = document.querySelector('#rightRotate')const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')const body = document.body// 压缩后的图片urllet compressUrl = ''// 压缩后的目标宽度和高度let targetWidth, targetHeight// 下载的图片类型const FILE_TYPE = 'image/jpeg'// 最大上传文件大小const MAX_SIZE = 3 * 1024 * 1024// 上传文件类型const FILE_TYPES = ['image/jpeg', 'image/png']// 上传文件最大宽度const MAX_WIDTH = 1024// 上传文件最大高度const MAX_HEIGHT = 1024// 上传文件最大宽高比const MAX_WH_RATIO = MAX_WIDTH / MAX_HEIGHT// 重置function resetEl () {const imgArr = body.querySelectorAll('img')imgArr.forEach(v => {body.removeChild(v)})ratioEl.innerHTML = ''}// 将文件转成base64function convertFile2base64 (file) {return new Promise((resolve, reject) => {let reader = new FileReader()reader.addEventListener('load', e => {resolve(e.target.result)reader = null})reader.readAsDataURL(file)})}// 压缩图片function compress (url) {const img = new Image()img.src = url// body.appendChild(img)img.addEventListener('load', e => {const {width: originWidth, height: originHeight} = e.target// 原始宽高比const originWHRatio = originWidth / originHeighttargetWidth = originWidthtargetHeight = originHeight// 1、计算上传图片压缩后的宽高// 2、绘制压缩后的图片// 3、上传if (originWidth > MAX_WIDTH || originHeight > MAX_HEIGHT) {if (originWHRatio > MAX_WH_RATIO) {// 图片更宽targetWidth = MAX_WIDTHtargetHeight = Math.round(targetWidth / originWHRatio)} else {// 图片更高targetHeight = MAX_HEIGHTtargetWidth = Math.round(targetHeight * originWHRatio)}}// 图片压缩比const ratio = originWidth / targetWidthconst newImg = document.createElement('img')newImg.id = 'newImg'ratioEl.innerHTML = ratiocanvas.width = targetWidthcanvas.height = targetHeightctx.clearRect(0, 0, targetWidth, targetHeight)// 绘制压缩的图片ctx.drawImage(img, 0, 0, targetWidth, targetHeight)// 获取 Data UrlcompressUrl = canvas.toDataURL(FILE_TYPE);newImg.src = compressUrlnewImg.addEventListener('load', () => {body.appendChild(newImg)})// body.appendChild(canvas)})}fileEl.addEventListener('change', e => {resetEl()const [file] = e.target.filesif (!file) returnconst {size: fileSize, type: fileType} = fileconsole.warn('file', file, fileSize, MAX_SIZE,  fileType);if (!FILE_TYPES.includes(fileType)) {alert('只能上传图片')fileEl.value = ''return}if (fileSize > MAX_SIZE) {alert('图片不能超过3M')fileEl.value = ''return}convertFile2base64(file).then(res => {compress(res)})})downloadEl.addEventListener('click', () => {if (!compressUrl) returnconst a = document.createElement('a')a.href = compressUrla.style.display = 'none'a.download = '图片'body.appendChild(a)a.click()a.remove()})leftRotateEl.addEventListener('click', e => {const newImg = document.querySelector('#newImg')canvas.width = newImg.heightcanvas.height = newImg.widthctx.clearRect(0, 0, newImg.height, newImg.width)ctx.translate(0, canvas.height);ctx.rotate(270 * Math.PI / 180)ctx.drawImage(newImg, 0, 0, newImg.width, newImg.height)compressUrl = canvas.toDataURL(FILE_TYPE)newImg.src = compressUrl})rightRotate.addEventListener('click', e => {const newImg = document.querySelector('#newImg')canvas.width = newImg.heightcanvas.height = newImg.widthctx.clearRect(0, 0, newImg.height, newImg.width)ctx.translate(canvas.width, 0);ctx.rotate(90 * Math.PI / 180)ctx.drawImage(newImg, 0, 0, newImg.width, newImg.height)compressUrl = canvas.toDataURL(FILE_TYPE)newImg.src = compressUrl})</script>
</body>
</html>

canvas实现图片旋转相关推荐

canvas签名图片旋转
canvas签名图片旋转前言一.实现思路二.详细代码总结前言当使用canvas完成横屏签名功能时,最后签名图片需要旋转角度,保证图片横铺一.实现思路思路是重新创建应该canvas,将图 ...
html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转抽奖转盘代码.60图片旋转制作抽奖转盘代码代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（1）
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（2）
文章过长,一篇无法保存 IE下及标准浏览器下的图片旋转(二)-- Canvas(1) 同样,作为最后,我们使用使用jquery也为canvas写个旋转demo: javascript: $(funct ...
canvas在舞台上点击后图片旋转_Canvas-图片旋转
众所周知canvas是位图,你可以在里面渲染你要的东西,不过你只能操作canvas的属性来进行编辑.就是说你并不能操作画进canvas的东西,例如我在canvas里添加一幅画,我现在想将那幅画移动10 ...
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) - 可编辑图片指定区域位置
注: 苹果手机升级IOS14.1系统后,出现图片写入不了CANVAS画布问题解决方法:alloy_paper.js 文件查找代码: this.img.crossOrigin = "Anon ...
移动端 canvas 横屏签名图片旋转
学习与前端实现电子签名是通过原生canvas实现,我这篇是对其进行了改造,记录一下效果图组件 components/esign.vue <template><div styl ...
canvas图片旋转，图片base64编码，保存图片
在一些业务场景中,常常需要前端对图片进行操作,这样可以将部分的性能压力转移到前端设备,有利于减小服务器压力,下面讲解前端怎么操作图片. 首先,对图片的操作都是依赖于canvas画布,这里对canvas ...

canvas实现图片旋转

canvas实现图片旋转

前言

代码

canvas实现图片旋转相关推荐

最新文章

热门文章