2012-11-21 99 views
2

我遇到了html5畫布的問題。我正在使用EaselJS來加載圖像。canvas cross domain像素錯誤

http://www.createjs.com/Docs/EaselJS/Bitmap.html

但是當我添加任何種類的鼠標事件(的onClick,的onMouseOver,的onmouseout)上的圖像的parentcontainer,從目前移動我的鼠標,EaselJS修建垃圾這個錯誤:

uncaught exception: An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

它運行在IIS服務器上,我得到的圖像來自其他域。 我可以通過使用--disable-web-security使它在Chrome中工作。但我寧願避免這種情況。

我已閱讀了有關代理腳本的一些信息,可能有助於解決此問題,但我不確切知道如何在此處實現此功能。

任何修復建議?編輯: 已解決! 我解決了這個用一個簡單的asp.net代理腳本

http://www.sharepointjohn.com/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/

我從這次與同事的一些幫助開始來到這個ashx的文件:

<%@ WebHandler Language="C#" Class="getSharepointImage" %> 

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Net; 
using System.IO; 
using System.Drawing; 

public class getSharepointImage : IHttpHandler { 

    public void ProcessRequest (HttpContext context) { 
     context.Response.ContentType = "text/plain"; 

     string proxyURL = string.Empty; 
     try 
     { 
      proxyURL = HttpUtility.UrlDecode(context.Request.QueryString["u"].ToString()); 
     } 
     catch { } 

     if (proxyURL != string.Empty) 
     { 
      HttpWebRequest request = (HttpWebRequest)WebRequest.Create(proxyURL); 
      //request.Credentials = new NetworkCredential("username", "password"); //needed if you wish to access something like sharepoint 
      request.Method = "GET"; 

      HttpWebResponse response = (HttpWebResponse)request.GetResponse(); 

      if (response.StatusCode.ToString().ToLower() == "ok") 
      { 
       string contentType = "img/png"; 
       Stream content = response.GetResponseStream(); 
       StreamReader contentReader = new StreamReader(content); 
       context.Response.ContentType = contentType; 

       var outStream = context.Response.OutputStream; 
       Bitmap myImage = new Bitmap(System.Drawing.Image.FromStream(response.GetResponseStream())); 


       MemoryStream writeStream = new MemoryStream(); 
       myImage.Save(outStream, System.Drawing.Imaging.ImageFormat.Png); 
       writeStream.WriteTo(outStream); 
       myImage.Dispose(); 

      } 
     } 
    } 

    public bool IsReusable { 
     get { 
      return false; 
     } 
    } 

} 

回答

0

嘗試以下操作:

var hitArea = new createjs.Shape; 
hitArea.graphics.beginFill("#000").drawRect(0,0,100,100);  
yourobj.hitArea = hitArea;