2

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

}
4

1 回答 1

0

尝试以下操作：

var hitArea = new createjs.Shape;   
hitArea.graphics.beginFill("#000").drawRect(0,0,100,100);       
yourobj.hitArea  = hitArea;
于 2014-10-16T08:01:34.247 回答