JavaScript圖像永久旋轉

我正在尋找一種方法在瀏覽器中本地旋轉圖像並將其存儲在本地我試圖用canvas和jquerryrotate旋轉圖像。但在引導方法中，圖像僅在視圖中旋轉。只要我存儲這些圖像（例如canvas.toDataURL（）），我就會得到原始文件/旋轉。有沒有辦法在瀏覽器中本地瀏覽圖片而無需php/server端的交互？ Thx！JavaScript圖像永久旋轉

$("#Img").rotate(90);
var dataURL5 = document.getElementById('Img').src;

- > dataURL5不包含旋轉的圖像，但原...在瀏覽器我有旋轉視圖.... 或with canvas
context_tmp.translate(canvas_tmp.width , canvas_tmp.height /canvas_tmp.width);
context_tmp.rotate((Math.PI/2));
個

畫布是不是requiredment ...我只是嘗試了......

在啓動

來源

2013-08-20 Roland

問題是什麼？你在本地旋轉它，但它不能在本地工作？ – putvande

是的。有。你有什麼嘗試？ – isherwood

爲什麼要使用畫布？ CSS3'rotate'就是你需要的 –

你需要使用它的toDataURL()法提取畫布圖像。

您無法從src屬性（但原始URL）提取任何圖像數據。

注意：如果原始圖像來自不同的原產地比頁面，這將不起作用，因爲CORS踢（cross-origin resource sharing）。這是設計和意圖。

您需要rotate和translate畫布使用其上下文，然後繪製圖像。現在，您可以撥打toDataURL()來獲取圖像數據（如果CORS踢入，圖像將爲空白）。

例：

/// translate so rotation happens at center of image 
ctx.translate(image.width * 0.5, image.height * 0.5); 

/// rotate canvas context 
ctx.rotate(0.5 * Math.PI); /// 90deg clock-wise 

/// translate back so next draw op happens in upper left corner 
ctx.translate(-image.width * 0.5, -image.height * 0.5); 

/// image will now be drawn rotated 
ctx.drawImage(image, 0, 0); 

/// get the rotated image (unless CORS kicks in...) 
var dataUri = canvas.toDataURL();

我做了一個小提琴與此代碼但CORS是有效的，我使用它的形象是一種毫無意義的，但反正 - here goes。

來源

2013-08-20 20:12:56 K3N

JavaScript圖像永久旋轉

回答

相關問題