2011-01-07 36 views
0

是否有任何方法僅使用客戶端JavaScript裁剪照片?僅使用接受URL作爲輸入的JavaScript來裁剪照片

當我嘗試搜索這樣的工具時,JavaScript部分總是使用DHTML來簡單地允許用戶選擇要裁剪的圖像的哪個區域,然後將該信息發送到服務器端腳本(例如ASP,PHP)以實際上執行作物。

我意識到JavaScript無法創建文件或請求它們,但我認爲應該可以解決這個問題。至於輸入,我希望JavaScript文件獲取圖像的URL。這很簡單,您可以輕鬆創建一個<image>元素來顯示它。至於輸出,我希望得到一個data URI解決方案。

Severalsolutions存在,但是,當我嘗試使用它們(http://jsfiddle.net/sfjsfid/skm6V/1/),我得到的錯誤:

Uncaught Error: SECURITY_ERR: DOM Exception 18

之所以出現這種情況是因爲specification指出,必須產生這個錯誤,當你請求來自不同於託管網頁的域的圖像。

是否有任何其他方式有一個純粹的客戶端JavaScript解決方案的裁剪圖像可以來自不同的域?

如果我嘗試使用數據uri而不是來自不同域(http://jsfiddle.net/VX2z2/)的圖像,它可以正常工作。但是,爲了能夠使用圖像的URL作爲輸入,我需要以某種方式將其轉換爲數據URI。由於我已經討論過的安全問題,使用畫布不起作用。即使我找到了一個我可以使用的Web服務,它也不會工作,因爲那樣我就會向外部域發送一個Ajax請求,這是另一個被瀏覽器阻止的安全風險。

託管我自己版本的Web服務或託管服務器端代碼不是一個選項。

還有其他想法嗎?或者是接受數據uri作爲輸入的唯一選擇?

回答

1

如果你想打破安全模型,你需要做一些比Web應用程序更好的事情 - 比如Firefox擴展。這會給你額外的請求權限,甚至保存圖像。

1

沒有辦法解決安全模型。您需要服務器端的幫助來請求來自不同域的數據並從JavaScript訪問它。