Question

我在使用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;
        }
    }

}

Answer 1

尝试以下方法：

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

画布跨域像素错误

1 个答案: