html5 – localhost上的context.getImageData()?

前端之家收集整理的这篇文章主要介绍了html5 – localhost上的context.getImageData()?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下代码片段,我试图从localhost(OSX,运行XAMPP)运行它:
var canvas = document.getElementById('mycanvas');
    var cx = canvas.getContext('2d');

    var myImg = new Image();
    myImg.src = 'images/lion.jpg';

    $(myImg).load(function() {
        cx.drawImage(myImg,0);
        var imgData = cx.getImageData(0,150,150);
    });

但是当我运行它时,我从控制台收到此错误

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
site.js:11Uncaught Error: SECURITY_ERR: DOM Exception 18

我在这里发现了一些类似的问题,我知道这与我在本地工作的事实有关,如果我试图从同一个域访问图像,这不会发生.我不知道这是否有意义,但这是我所理解的.

我的问题是,如何在本地开发环境中完成这项工作?

解决方法

使用HTTP服务器(例如Apache或Nginx)提供html服务.

Mac OSX安装了Python,因此您可以通过打开终端来启动HTTP服务器,然后输入:

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

然后在浏览器中打开http:// localhost:8000 /.这应该工作.

猜你在找的HTML5相关文章