网站首页 > 技术文章 正文
前几天,朋友要做个上传图片后,如何让图片旋转角度,并且不影响容器或者随着图片大小改变容器。
先上完整实例效果图
一开始想到的是给 img 用 css3 的`transform: rotate(90deg);`
结果变成这个样子:
角度完全偏离中心了。
手动去调整 img 的 left 和 top 也是无用,不同的图片大小不一样,很难把控。
如果 js 实时去调整图片或者容器的宽高,也不现实,麻烦不说代码一堆。
突然想到用 canvas 可以绘图,最近刚好在研究。
// 获取图片 id
var img = document.getElementById("Img");
// 创建 canvas
var canvas = document.createElement('canvas');
//给 canvas 创建画板
var cxt = canvas.getContext('2d');
// 给画板添加宽高
canvas.width = img.width;
canvas.height = img.height;
// 渲染
cxt.drawImage(img, 0, 0);
// 输出到页面中
document.body.appendChild(canvas);
图片绘制了,但是并没有旋转角度,怎么旋转呢?
简单介绍下`getContext("2d")`对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
然后再查看下手册 canvas 提供的方法
根据描述,以下两个方法完全满足我们的需求
`translate()` // 重新映射画布上的 (x,y) 位置
`rotate()` // 旋转当前绘图
举个例子,一张图片宽高为 w:100,h:300 的时候,旋转 90° 后,宽高应为: w:300,h:100
为什么要用`translate()`呢,因为旋转角度是以 x 为起点的,如果不用这个方法,绘制出来后你会看不到图像的。
x 添加到水平坐标(x)上的值
y 添加到垂直坐标(y)上的值
根据例子,代码应为:
cxt.translate(300, 0); // 坐标 x, y
cxt.rotate(90 * Math.PI / 180);
怎么`rotate()`里面有个`Math.PI / 180`是什么鬼?
请看参数说明:
`context.rotate(angle);`
angle:
旋转角度,以弧度计。
如需将角度转换为弧度,请使用 `degrees*Math.PI/180` 公式进行计算。
举例:如需旋转 5 度,可规定下面的公式:`5*Math.PI/180`。
小编总结旋转 4个角度分别对应的参数应为:
// 0:
canvas.width = img.width;
canvas.height = img.height;
cxt.translate(0, 0);
cxt.rotate(0 * Math.PI / 180);
// ---------------
// 90:
canvas.width = img.height;
canvas.height = img.width;
cxt.translate(img.height, 0);
cxt.rotate(90 * Math.PI / 180);
// ---------------
// 180:
canvas.width = img.width;
canvas.height = img.height;
cxt.translate(img.width, img.height);
cxt.rotate(180 * Math.PI / 180);
// ---------------
// 270:
canvas.width = img.height;
canvas.height = img.width;
cxt.translate(0, img.width);
cxt.rotate(270 * Math.PI / 180);
绘制出来的是 canvas,怎么变成图片数据呢,我们需要用:`toDataURL()`
canvas.toDataURL 返回的是一串 Base64 编码的 URL,当然,浏览器自己肯定支持
// 指定格式 PNG
canvas.toDataURL("image/png");
// 指定格式 JPEG
canvas.toDataURL("image/jpeg");
// 指定格式 JPEG 压缩 0.5 质量, 0-1 之间
canvas.toDataURL("image/jpeg", 0.5);
图片压缩前后对比,左边是压缩前,右边是压缩 0.5 后。
图片压缩体积前后大小对比,左边是压缩前,右边是压缩 0.5 后。
简化版实例代码
// 获取图片 id
var img = document.getElementById("Img");
// 创建 canvas
var canvas = document.createElement('canvas');
var new_img = document.createElement('img');
// 给 canvas 创建画板
var cxt = canvas.getContext('2d');
new_img.onload = function () {
// 给画板添加宽高
canvas.width = new_img.height;
canvas.height = new_img.width;
// 渲染
cxt.translate(new_img.height, 0); //坐标
cxt.rotate(90 * Math.PI / 180);
cxt.drawImage(new_img, 0, 0);
var base64 = canvas.toDataURL("image/jpeg");
var base64_s = canvas.toDataURL("image/jpeg", 0.5);
var img_source = new Image;
var img_compression = new Image;
img_source.id = "img-source";
img_source.src = base64;
img_compression.id = "img-compression";
img_compression.src = base64_s;
// 输出到页面中
document.body.appendChild(img_source);
document.body.appendChild(img_compression);
}
new_img.src = img.src;
jQuery 插件版
做成了个 jQuery插件,完整代码太多了,想要下载的可以到 github 上下载:
https://github.com/orzhtml/rotateImg/
本文内容均属个人原创作品,转载此文章须附上出处及原文链接。
加关注,定时推送,互动精彩多,若你有更好的见解,欢迎留言探讨!
猜你喜欢
- 2024-09-10 Python奇淫技巧之自动登录哔哩哔哩(解决滑块验证)
- 2024-09-10 html转image 保存到zip(html保存成图片)
- 2024-09-10 前端上传图片被旋转的处理方案(nba常规赛录像高清回放)
- 2024-09-10 Day 3 学习Canvas这一篇文章就够了
- 2024-09-10 JavaScript实现浏览器本地的图像移动、大小调整和裁剪
- 2024-09-10 微信内置浏览器动态生成二维码并长按识别
- 2024-09-10 Python奇淫技巧之自动登录哔哩哔哩
- 2024-09-10 JSPDF + html2canvas A4分页截断(html做分页)
- 2024-09-10 vue手把手教学~搭建web聊天室(vue简单聊天室)
- 2024-09-10 前端:从零实现一款可视化图片编辑器
- 1509℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 526℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 492℃MySQL service启动脚本浅析(r12笔记第59天)
- 472℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 469℃启用MySQL查询缓存(mysql8.0查询缓存)
- 449℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 429℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 426℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)