帆布drawImage onload功能不工作

在這段代碼中，我已經從svg元素獲取base64值。因爲我想png/jpg值從畫布創建圖像，但它不工作的圖像onload函數。帆布drawImage onload功能不工作

<script> 
    jQuery(document).ready(function() { 
    var svgData = document.getElementById("svgdiv").innerHTML; 
    var url = "data:image/svg+xml;base64," + btoa(svgData); 
    getBase64FromImageUrl(url); 
    }); 
    function getBase64FromImageUrl(URL) { 
    var img = new Image(); 
    img.src = URL; 
    console.log(img); 

    img.onload = function() {// here code not working 
     console.log("FDF"); 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0); 

     var dataURL = canvas.toDataURL("image/png"); 

     alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); 

    }; 
    } 
</script>

來源

2014-11-25 Udhaya Kumar V

代碼'img.src = URL;'和'console.log（img）'應該跟隨分配處理程序到onload事件的代碼。即，你應該設置onload事件的行爲，然後_then_你應該設置img元素的來源並嘗試加載它。 'console.log'調用的時間可能比加載圖像的時間要長，在這種情況下，在爲onload事件分配處理程序之前，圖像已經加載。 – enhzflep 2014-11-25 13:50:54

我刪除console.log（img）。但仍然無法正常工作.. – 2014-11-26 06:59:15

正如我在我的評論說，你需要指定的您分配onload處理的img後的.src屬性。刪除console.log調用仍然不會執行此操作。當然，它確實減少了分配src和分配onload處理程序之間的時間，但這不是做到這一點的方法。

這裏是你的代碼所需的額外東西，使其成爲一個功能齊全的例子。請注意分配的順序和console.log呼叫。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
"use strict"; 
function byId(e){return document.getElementById(e);} 
function newEl(tag){return document.createElement(tag);} 
function newTxt(txt){return document.createTextNode(txt);} 

function toggleClass(elem, className){elem.classList.toggle(className);} 
function toggleClassById(targetElemId, className){byId(targetElemId).classList.toggle(className)} 

function hasClass(elem, className){return elem.classList.contains(className);} 
function addClass(elem, className){return elem.classList.add(className);} 
function removeClass(elem, className){return elem.classList.remove(className);} 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    var svgData = byId("svgdiv").innerHTML; 
    var url = "data:image/svg+xml;base64," + btoa(svgData); 
    getBase64FromImageUrl(url); 
} 

function getBase64FromImageUrl(URL) 
{ 
    var img = new Image(); 
    document.body.appendChild(img); 

    // here code not working 
    img.onload = function() 
    { 
     console.log("FDF"); 
     var canvas = newEl("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0); 

     var dataURL = canvas.toDataURL("image/png"); 

     alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); 
    }; 

    img.src = URL; 
    console.log(img); 
} 

</script> 
<style> 
</style> 
</head> 
<body> 
    <div id='svgdiv'> 
     <svg id="svgRoot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <rect x="0" y="0" width="100%" height="100%" fill="#009399"/> 
     <circle cx="150" cy="75" r="50" fill="blue" onmouseover="this.setAttribute('fill', 'white')" onmouseout="this.setAttribute('fill', 'blue')"/> 
     </svg> 
    </div> 
</body> 
</html>

來源

2014-11-26 08:37:52 enhzflep

帆布drawImage onload功能不工作

回答

相關問題