canvas drawImage onload не работает

В этом коде я получил значение base64 из svg-элемента. Из-за того, что я хочу значение png/jpg для создания изображения с холста, но его не работает функция загрузки изображения.canvas 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)' должен _follow_ код, назначающий обработчик событию onload. I.e, вы должны установить поведение для события onload, _then_ вы должны установить источник элемента img и попытаться загрузить его. Вызов 'console.log' вполне может занять больше времени, чем загрузка изображения, и в этом случае изображение уже загрузилось, прежде чем назначить обработчик для события onload. – enhzflep

Удаляет console.log (img). но все еще не работает .. –

Как я уже сказал в своем комментарии, вам нужно присвоить атрибут imgпосле вы назначили обработчик OnLoad .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

canvas drawImage onload не работает

ответ

Смежные вопросы