canvas cross domain pixel error

问题

I'm having this issue with the html5 canvas. I'm using EaselJS to load in images.

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

But when I add any kind of mouse events (onClick, onMouseOver, onMouseOut) on a parentcontainer of the image, from the moment i move my mouse, EaselJS spams this error:

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.

It's running on an IIS server and the image I get is from an other domain. I can get it working in Chrome by using --disable-web-security. But I'd rather avoid that.

I have read something about a proxy script might help fix this, but I don't know exactly how I could implement that here.

Any suggestions for a fix?

EDIT: Resolved! I resolved this by using a simple asp.net proxy script

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

I started from this and with some help of colleagues it came to this .ashx file:

<%@ 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;
        }
    }

}

回答1:

Try the following:

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

来源：https://stackoverflow.com/questions/13494746/canvas-cross-domain-pixel-error

标签

image

canvas

cross-domain

mouseevent

easeljs