Context.Getimagedata() on Localhost

context.getImageData() on localhost?

Serve your html with an HTTP server, for example, Apache or Nginx.

Mac OSX comes with Python installed, so you can simply start an HTTP server by opening a terminal, then input:

cd /path/to/my/work/
python -m SimpleHTTPServer

Then open http://localhost:8000/ in your browser. This should work.

Using Canvas to tint an image. Working in IE but not Chrome

context.getImageData() on localhost?

Realized this is a security problem with Chrome and having the images on my local machine. Served the page using Apache.

canvas getImageData isn't working

Let me guess ... you're using Google Chrome as your browser. Which is the most problematic browser for this issue.

The issue centres upon what is known as cross-site security. in short, modern browsers are designed to prevent cross-site content from being loaded into a browser, except under special conditions, in part to stop malicious code being injected into web pages that you load.

This extends to images and HTML5 canvas data. The reason being, that some sneaky individuals discovered, early in the days of the HTML5 canvas being provided, that they could use it to provide an image snapshot of your current browser contents, and send that snapshot back to be perused at leisure. If you were browsing your bank's website at the time, and engaging in sensitive financial transactions online, whoever used this technique would quickly be able to find out about your finances, and possibly even pose as you to raid your account.

That's one of the reasons restrictions on cross site content were introduced.

Now, of course, there are legitimate reasons for having cross-site content. Such as having one's fonts or images stored in a separate repository. Trouble is, the cross-site restrictions impact upon legitimate uses as well as illegitimate ones.

Consequently, in order to use images cross-site, you have to do so in conformity with the CORS protocol. But, to do this, you need your images to be provided by a web server that's set up to handle CORS transactions. Simply setting the img.crossOrigin property of an Image object to "anonymous" won't work on its own: you need the server that's sending the images, to be set up to respond to the pre-flight options request that your browser will send, before allowing the image to be treated as acceptable from a security standpoint.

Which means, that to solve your problem, you need either, to:

[1] Install a local web server to perform this task for you - this option involves much tedium reading the web server manual, in order to set the server up properly, and much editing of configuration files;

[2] Write your own server to run under node.js or similar - this option involves even more tedium learning how to write your own web server, and make that server handle CORS transactions properly.

Now, if you're testing code offline in the "old school" manner, Firefox will let you access images from the same directory as your code, via the file:// protocol, and won't complain. Firefox apparently has enough intelligence to realise that an image being extracted from the same directory of your hard drive as your web page, constitutes a same-origin image.

If, however, you're using Google Chrome, it won't. At least, not unless you run it using special command line parameters. Even then, Chrome has a propensity to throw temper tantrums when asked to handle this sort of request. It's an issue I wrestle with frequently, and though some might be tempted to tell me to do my testing in Firefox to avoid these woes, Chrome's internal debugger is, for me at least, far more pleasant to use than Firefox's debugger, which, in my current Firefox installation, crawls like a snail on Mogadon, and exhibits a friendliness and smoothness of use reminiscent of a cocaine-soaked pit viper.

So, if you're using Chrome, because like me, you like its internal debugger, you're stuck with the two options I've given above. Either install a web server (Apache, Nginx, take your pick) or install Node.js and write your own. Neither option is easy.

getImageData cross-origin error

You can't use file:// if you're using that (Chrome allow you to override this but I won't recommend it).

For local testing use a light-weight server such as Mongoose which allow you use http://localhost as a domain to test your local pages. This way you avoid problems with CORS.

If you need to host images on a different domain you need to make sure they support cross-origin usage.

DropBox and ImgUrl (I recommend the latter for just images) both support CORS usage, but you need to request such usage by adding the crossOrigin property to your image before setting the source (or include it in the HTML tag if you're using that):

var img = new Image;

img.onload = myLoader;
img.crossOrigin = '';              ///=anonymous
img.src = 'http://imgur.com/....';

or in HTML:

<img src="..." alt="Sample Image" crossOrigin="anonymous" />

How to fix getimagedata the operation is insecure

I was able to fix this using somewhat spine curling code.

In my php, I did this.

        $imgSrc= $this->_request->getParam('imgSrc', ''); //URL of image
        if (!empty($imgSrc)) {
            $imgSrc = file_get_contents($imgSrc); //naughty variable reuse
            $imgSrc = 'data:image/x-icon;base64,' . base64_encode($imgSrc);
        }

This way the original image isn't used, and instead an epic string is sent instead, which doesn't cause the security issue.
Then to alleviate memory, I added image.src=""; to the end of the load event.

var image = document.getElementById("img");

image.addEventListener('load', function (event) {
    alert("here");         

    orgImg.width = this.naturalWidth;
    orgImg.height = this.naturalHeight;
    orgImg.getContext("2d").drawImage(this, 0, 0);           
    image.src=""; //clear the massive string from memory

    //etc
    orgImg.getContext("2d").getImageData(0, 0, orgImg.width, orgImg.height) //security error
}, {once: true});
image.src = '<?= $this->imgSrc ?>';

This page will never be accessed by mobile so it's ok to use crazy RAM for a moment. But a better solution would be good if anyone has one.

Thanks

---

Related Topics