context.getImageData() trên localhost?

Question

Tôi có đoạn mã sau đây và tôi đang cố gắng để chạy nó từ localhost (OSX, chạy 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, 0); 
     var imgData = cx.getImageData(0,0,150,150); 
    }); 

Nhưng khi tôi chạy nó tôi nhận được lỗi này từ giao diện điều khiển:

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 

Tôi đã tìm thấy một số câu hỏi tương tự ở đây và tôi biết rằng điều này có liên quan đến thực tế là tôi đang làm việc cục bộ và điều này sẽ không xảy ra nếu tôi đang cố truy cập hình ảnh từ cùng một miền. Tôi không biết điều này có hợp lý không, nhưng đó là điều tôi hiểu.

Câu hỏi của tôi là, làm thế nào tôi có thể thực hiện công việc này trong môi trường dev cục bộ?

Answer 1

Phân phối html của bạn bằng máy chủ HTTP, ví dụ: Apache hoặc Nginx.

Mac OSX đi kèm với cài đặt Python, vì vậy bạn chỉ có thể bắt đầu một máy chủ HTTP bằng cách mở một thiết bị đầu cuối, sau đó nhập:

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

Sau đó mở http://localhost:8000/ trong trình duyệt của bạn. Điều này sẽ làm việc.

Answer 2

Thử một trình duyệt khác có thể hữu ích. Điều này đã xảy ra với tôi trên Chromium và chỉ bằng cách chuyển sang Firefox, tôi có thể tiếp tục gỡ lỗi cục bộ.

Answer 3

tôi đã kết thúc bằng một kết hợp của giải pháp (xem this other problem)

bước:

1. Chuyển đổi hình ảnh vào chuỗi base64.
2. Chỉ định đó là src của đối tượng Hình ảnh js.
3. Draw trên vải

Code:

// helper to transform to base64 
// see other question for more help 
function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     callback(reader.result); 
    }; 
    reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
} 

var canvas  = document.querySelector("canvas"); 
var ctx   = canvas.getContext("2d"); 
var png   = new Image(); 
var backgroundSrc = "....."; 

png.onload = function() { 
    ctx.drawImage(png, 0, 0); 
}; 

toDataUrl(backgroundSrc, function(base64Img) { 
    png.src = base64Img; 
}); 

tôi biết giải pháp này là không tối ưu, nhưng nó làm việc cho tôi VÀ nó giúp khi hình ảnh không xuất phát từ cùng một nguồn gốc.

Tôi đang đăng nội dung này cho bất kỳ ai gặp sự cố tương tự.