캔버스 drawImage onload 함수가 작동하지 않습니다.

이 코드에서는 svg 요소에서 base64 값을 가져 왔습니다. 왜냐하면 나는 캔버스에서 이미지를 만들려면 png/jpg 값을 원하지만 작동하지 않는 이미지로드 기능을 원합니다.캔버스 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 이벤트에 대한 동작을 설정해야합니다. 그러면 img 요소의 소스를 설정하고로드하려고 시도해야합니다. 'console.log' 호출은 이미지로드보다 오래 걸릴 수 있습니다.이 경우 onload 이벤트에 대한 핸들러를 지정하기 전에 이미지가 이미로드되어 있습니다. – enhzflep

console.log (img)를 제거합니다. 하지만 여전히 작동하지 않습니다 .. –

내 의견에 말했듯이, 당신은 당신이 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 함수가 작동하지 않습니다.

답변

관련 문제