帆布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功能不工作

回答

相关问题