画布跨域像素错误

Question

我在html5画布上遇到了这个问题。我正在使用EaselJS加载图像。

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

但当我在图像的父容器上添加任何类型的鼠标事件(onClick、onMouseOver、onMouseOut)时，从我移动鼠标的那一刻起，EaselJS就会发送此错误：

未捕获的异常：发生错误。这很可能是由于读取具有本地或跨域图像的画布像素数据的安全限制。

它在IIS服务器上运行，我得到的映像来自其他域。我可以通过使用--disable网络安全来使它在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;
}
}
}

Answer 1

尝试以下操作：

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