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

Question

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

Answer 1

不是在服务器端处理的，客户端就可以实现，我们使用的是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;
}

Answer 2

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

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

Answer 3

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

使用canvas， 但也支持IE的。

Answer 4

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