在这段代码中，我从 svg 元素获取了 base64 值。因为我想要 png/jpg 值从 Canvas 创建图像，但它不起作用图像加载功能。
<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>
最佳答案
正如我在评论中所说，您需要分配 img 的 .src 属性after您已经分配了 onload 处理程序。删除 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>
关于javascript - Canvas drawImage onload函数不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27126763/