導出畫布與圖像作爲圖像（如PNG或JPG）

Question

我只是基本上想要得到我的「http：// ... .png」或「http：// ... .jpg」位置畫布作爲圖像。

我已經嘗試toDataURL（）但它不工作。特別是如果我在畫布中加載圖像。

這裏是我的代碼：（順便說一句，我使用jQuery在這裏）

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
var canvas = $("#canvas"); 
var ctx = canvas.get(0).getContext("2d"); 

var image1 = new Image(); 
image1.src = "http://www.helpinghomelesscats.com/images/cat1.jpg" 
$(image1).load(function(){ 
    ctx.drawImage(image1,0,0,200,200); 
}); 

}); 
</script> 

與只有我的HTML /體這樣的：

<canvas id="canvas" width="500" height="400"></canvas> 

現在，如果你嘗試，那工作正常。它表明那隻貓。

但是當我添加到DataURL到我的腳本，它只是不會發生。

var dataImg = canvas.get(0).toDataURL(); 

我這個dataImg變量裝入另一個點擊重定向功能進行測試，希望它能使用的base64 URL包含重定向到網頁，但它只是不工作：

$("#canvas").click(function(){ 
    document.location = dataImg; 
}); 

它把我帶到一個空白頁面？我在這裏錯過了什麼？

非常感謝你！

Answer 1

您是否擁有http://www.helpinghomelesscats.com或者是否直接在該網站上託管代碼？如果沒有，您將無法做到這一點，因爲跨網站的來源政策。最好的辦法是讓一些服務器端代碼獲取圖像，然後在您的域上本地提供。

如果你自己helpinghomelesscats.com這應該工作，因爲這裏

Live Demo

測試點擊畫布，查看日誌，以查看響應。