我所有的瀏覽器都沒有發送原始頭文件

我想將圖像加載到canvas元素中，然後將數據拖出到toDataURL（）中。我所有的瀏覽器都沒有發送原始頭文件

我有我的網站使用Ruby運行on Rails的2.3

我有我的圖片來自AWS的S3服務。我已經安裝CORS：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>HEAD</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration>

我有一個canvas元素：

<canvas id="explain_canvas"></canvas>

好了，所以一些背景。我最初試圖用這樣的代碼，其中drawing_image只是圖像的url。

var outlineImage = new Image(); 
outlineImage.crossOrigin = ''; 
outlineImage.src = drawing_image; 
outlineImage.onload = function() { 
    var canvas = document.getElementById('explain_canvas'); 
    var context = canvas.getContext("2d"); 
    context.drawImage(outlineImage, 10, 10, 600, 150); 
}

但是，這並沒有發送源頭。所以我想我會嘗試通過jQuery的阿賈克斯電話

var outlineImage = new Image(); 
$(outlineImage).attr('crossOrigin', ''); 
$.ajax({ 
    type: 'get', 
    url : drawing_image, 
    contentType: 'image/png', 
    crossDomain: 'true', 
    success: function() { 
     $(outlineImage).attr("src", drawing_image); 
    }, 
    error: function() { 
     console.log('ah crap'); 
    } 
}); 

outlineImage.onload = function() { 
var canvas = document.getElementById('explain_canvas'); 
var context = canvas.getContext("2d"); 

context.drawImage(outlineImage, 10, 10, 600, 150); 
}

但仍然沒有運氣。我錯了嗎？如果該jquery ajax發送源頭？

我看請求頭，這就是我得到的圖像：

Accept:*/* 
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3 
Accept-Encoding:gzip,deflate,sdch 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Host:em2-images.s3.amazonaws.com 
Referer:http://localhost:3000/courses/18/quizzes/22/take 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

而jQuery的錯誤，這一點：

XMLHttpRequest cannot load http://em2-images.s3.amazonaws.com/EM2_LF_A_5_item6.png. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 
ah crap

什麼是怪我是jQuery的狀態來源，但它不在請求標題中。

此計算器問題here聲明他想刪除原始標題。那麼他正在與jquery ajax進行同樣的調用並獲得它。任何想法，爲什麼我不是？

如果我重新加載頁面，它會抓取緩存的圖像並加載它（用原始標題記住你）並調用toDataURL（）就好了。在我清除緩存後，再次加載直到圖像被緩存爲止無法工作。

我開始想知道Rails是否在爲它做點什麼，但是我不明白它會怎麼做，因爲這是一個Ajax調用。但誰知道，誰知道Rails是否可以做到這一點？

我已經在不同平臺上的幾種瀏覽器中嘗試了這一點。 Chrome，Firefox，Safari，IE 9 & 10.在我的Mac，PC和iPhone上。沒有任何骰子。

-Thanks-

來源

2013-01-09 bfcoder

經過大量腦砸，我爲什麼我的瀏覽器不發送起源頭想通了。

第一個小背景。這是一個LMS並且是測驗的一部分。當老師編寫測驗時，他們將問題文本和圖像添加到繪圖畫布中，供學生用繪圖解釋他們的答案。

正如你所猜測的那樣，該圖片首先被加載。它隱藏在學生視圖中，我從該圖像抓取src url，並嘗試使用javascript將其放入canvas元素中。

那麼這個問題是第一次加載圖像，它沒有加載crossorigin屬性。因此沒有起源標題。到canvas元素試圖加載圖像時，它被緩存起來，而沒有原始標題。當它試圖讓科斯去吧。在我看來，也許這是所有瀏覽器需要修復的錯誤。但也許不是。

因此，在堅果殼中，在做Cors時，請確保圖像的第一個加載是使用crossorigin屬性來獲得起始標頭。 DUR我...

是啊，時間一重構...

來源

2013-01-09 15:12:13 bfcoder

謝謝！一旦我知道發生了什麼，我設法解決這個問題，方法是在URL中添加一個緩存破壞性的GET屬性。 – user1618143

必須爲那些仍然卡住的東西添加一些東西。你的回答是正確的，但是當獲得高速緩存的資源時，第二次使用相同的圖像時，它會刪除原始標題。因此，如果您需要緩存圖片，請將其保存在JavaScript中，並且不要再嘗試請求。我發現我試圖提高效率的做法是在緩存項目上拋出錯誤。 –

啊，夥計！你救了我的星期五！這種行爲非常麻煩。 –

我得到這個CORS錯誤，而在服務器端沒有被髮送的Origin標。

對我來說，問題在於我在圖像標記中設置了crossOrigin = Anonymous。刪除它解決了我的問題，並且CORS錯誤消失了。

來源

2016-12-22 03:24:25 arqam

我所有的瀏覽器都沒有發送原始頭文件

回答

相關問題