HTML畫布圖像到Base64問題

我在檢索畫布上顯示的圖像的base64版本時遇到問題。我已經看了其他問題，但沒有任何解決方案，包括canvas2image似乎工作。HTML畫布圖像到Base64問題

這裏是我的代碼：

<!DOCTYPE> 
<html> 
<head> 
    <style>#canvas {cursor: pointer;}</style> 
</head> 
<body> 
    <canvas id="canvas"></canvas> 

    <script type="text/javascript"> 

     var can = document.getElementById('canvas'); 
     var ctx = can.getContext('2d'); 

     var img = new Image(); 
     img.onload = function(){ 
      can.width = img.width; 
      can.height = img.height; 
      ctx.drawImage(img, 0, 0, img.width, img.height); 
     } 
     img.src = 'http://sstatic.net/stackoverflow/img/newsletter-ad.png'; 

     can.onclick = function() { 
      ctx.translate(img.width-1, img.height-1); 
      ctx.rotate(Math.PI); 
      ctx.drawImage(img, 0, 0, img.width, img.height); 
     }; 

    document.write(can.toDataURL()); //isn't writing the correct base64 image 


    </script> 
</body> 
</html>

這裏的測試環節：http://jsfiddle.net/mrchief/hgTdM/1/感謝，Mrchief

我需要的是在畫布上的圖像的base64輸出正確的。

問題是，它不會輸出正確的base64版本的圖像..但正如你所看到的，畫布內的圖像顯示沒有任何問題。

我已經測試了鍍鉻&火狐

非常感謝..

來源

2011-08-17 blmic

那麼，輸出什麼* *然後呢？ –

在Chrome＆FF5中適合我：http://jsfiddle.net/mrchief/hgTdM/1/ – Mrchief

在IE9和Firefox 6中可以正常工作。 – Caimen

你document.write()呼叫立即出現在網頁加載時，您img之前被加載並繪製和你onclick處理程序可以運行前。您需要等待生成數據URI，直到所有內容都發生在畫布上。

忽略onclick，這裏的東西，寫出來的數據鏈接的圖像加載和被吸引到畫布在旋轉方式後：

<!DOCTYPE html> 
<html><head> 
    <title>Rotated Image Data URL</title> 
    <style type="text/css" media="screen"> 
    canvas, textarea { display:block } 
    </style> 
</head><body> 
    <canvas id="canvas"></canvas> 
    <textarea id="data" rows="20" cols="80"></textarea> 
    <img id="echo"> 
    <script type="text/javascript"> 
     var can = document.getElementById('canvas'); 
     var ctx = can.getContext('2d'); 

     var img = new Image(); 
     img.onload = function(){ 
     can.width = img.width; 
     can.height = img.height; 
     ctx.translate(img.width-1, img.height-1); 
     ctx.rotate(Math.PI); 
     ctx.drawImage(img, 0, 0, img.width, img.height); 
     var url = document.getElementById('data').value = can.toDataURL(); 
     document.getElementById('echo').src = url; 
     } 
     img.src = 'gkhead.jpg'; 
    </script> 
</body></html>

你可以在這裏看到這些內容起作用演示：http://phrogz.net/tmp/upside-down-image-url.html

請注意，您加載的圖像必須與您的腳本位於同一個域中，否則您將無法創建數據網址。

來源

2011-08-18 02:43:37 Phrogz

感謝phrogz。問題在於圖像位於不同的域上。我不得不用PHP來解決這個問題。 – blmic

HTML畫布圖像到Base64問題

回答

相關問題