画布跨域像素错误答案

【问题标题】：canvas cross domain pixel error画布跨域像素错误
【发布时间】：2014-10-16 16:20:31
【问题描述】：

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

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

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

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

它在 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;
        }
    }

}

【问题讨论】：

标签： image canvas cross-domain mouseevent easeljs

【解决方案1】：

尝试以下方法：

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

【讨论】：