canvas drawImage onload函数不起作用

Question

In this code i have get base64 value from svg element. 在这段代码中，我从svg元素获取了base64值。 Because of i want png/jpg value to create image from canvas but its not working image onload function. 因为我想要png / jpg值从画布创建图像，但它不起作用图像加载功能。

<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>

Answer 1

As I said in my comment, you need to assign the .src attribute of the img after you've assigned the onload handler. 正如我在评论中所说，分配了onload处理程序后，您需要分配img的.src属性。 Removing the console.log call still doesn't do this. 删除console.log调用仍然不会执行此操作。 Granted, it does reduce the time between assigning the src and assigning the onload handler, but this is not the way to do it. 当然，它确实减少了分配src和分配onload处理程序之间的时间，但这不是这样做的方法。

Here's your code with the required extra stuff to make it a fully functional example. 这是您的代码，其中包含必需的额外内容，以使其成为一个功能齐全的示例。 Note the order of the assignments and the console.log call. 注意分配的顺序和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>

canvas drawImage onload函数不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-11-26 08:37:52

canvas drawImage onload函数不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-11-26 08:37:52

解决方案1
2 已采纳 2014-11-26 08:37:52