JavaScript-关于微博图片旋转的疑问

JavaScript-关于微博图片旋转的疑问

归属感 发布于 2016-10-27 字数 337 浏览 1239 回复 4

如下图:微博中的图片的“向左转”、“向右转”功能,我发现它的转换速度特别快,我只是不明白这个是在客户端还是在服务端处理的,如果在客户端处理的是用什么方法实现的,如果是后端来处理,那么它如何实现如此快速转换功能的?

请输入图片描述

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

甜柠檬 2017-03-24 4 楼

不是在服务器端处理的,客户端就可以实现,我们使用的是Canvas旋转图片

var rot=0;
var rotImg=0;
function rotateImage(id,direct){
rot=rotImg==id?rot:0;
rotImg=rotImg==id?rotImg:id;
if(direct==1){
rot -= 90;
if (rot === -90) {
rot = 270
}
}else if(direct==2){
rot += 90;

}

var rotateImg=$("[tag='rotImg_"+id+"']")[0];
var cv=document.getElementById("canvas_"+id);
var K = rotateImg.width;
var L = rotateImg.height;

if (!rot) {
rot = 0
}
var G = Math.PI * rot / 180;
var F = Math.round(Math.cos(G) * 1000) / 1000;
var H = Math.round(Math.sin(G) * 1000) / 1000;
cv.height = Math.abs(F * L) + Math.abs(H * K);
cv.width = Math.abs(F * K) + Math.abs(H * L);
var D = cv.getContext("2d");
D.save();
if (G <= Math.PI / 2) {
D.translate(H * L, 0)
} else {
if (G <= Math.PI) {
D.translate(cv.width, -F * L)
} else {
if (G <= 1.5 * Math.PI) {
D.translate(-F * K, cv.height)
} else {
D.translate(0, -H * K)
}
}
}
D.rotate(G);
D.drawImage(rotateImg, 0, 0, K, L);
D.restore();
rotateImg.style.display = "none"
if(direct==2){
if (rot === 270) {
rot = -90
}
}
return false;
}

想挽留 2017-03-13 3 楼

微博的圖片旋轉其實是使用Canvas的 可以在google和ff下看到
而IE是使用IE自帶的濾鏡來完成旋轉的。可以查一下相應的資料。

而jq貌似有個jquery.rotate.js的簡易旋轉js

甜柠檬 2017-01-20 2 楼

可以试试raphaeljs,这是示例http://raphaeljs.com/image-rotation.html

使用canvas, 但也支持IE的。

泛泛之交 2016-12-06 1 楼

用的是css3,IE下用滤镜即可解决