有沒有辦法在HTML 5和JavaScript中做客戶端圖像混搭？

Question

我正在處理圖像混搭Web應用程序。
我想避免閃存或其他客戶端的麻煩，只是純HTML + javascript。

爲了保持它的亮度，我想在Javascript中完成客戶端的工作，並且只是將最終保存的圖像推送到服務器。

我想在閱讀了關於HTML5和Canvas的奇蹟之後，我可以使用它。

麻煩的是，雖然：

1. 如果我使用新的拖放HTML5的功能，爲用戶的本地圖像傳遞給應用程序，然後將它畫到畫布上，然後......
   畫布弄髒了，如果我嘗試保存圖像數據，它會引發安全異常。


2. 如果我使用Bing圖像搜索API爲用戶查找圖像並將它們繪製到畫布上，則...
   畫布變髒並且如果我嘗試保存圖像數據時會拋出安全異常。

我唯一能想到的工作就是讓服務器充當一種代理，並將每個與客戶端一起工作的圖像都傳遞給客戶端 - 但是這打破了客戶端的目的。

有沒有其他的方法我沒有想到，或者是在客戶端的純HTML5 + JS只是不是這個用例的選項？

Answer 1

由於您使用的是來自不同域（本地或必應Bing）的圖像，因此會引發安全異常，您應該允許用戶將所選圖像上載到服務器上，然後在畫布中處理它們。對於來自互聯網存儲區的圖像，您可以使代理服務器在前端顯示它們，應始終上傳用戶PC上的圖像。就我所知，沒有其他辦法可以避免XSS異常。

P.S.這裏有一篇關於HTML5 canvas圖片限制的好文章：http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules