个人中心
gpt4 book ai didi

javascript - 当我传入图像数据字符串(基数 64)时，图像加载似乎被提前调用

转载 作者：行者123 更新时间：2023-11-28 02:32:38 27 4
gpt4 key购买 nike

我遇到了一个小错误，它似乎表明当您传入图像数据作为其源时，在图像完全加载之前调用了 onload 函数。

这是 HTML

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <canvas id='finalImage'></canvas>
</body>
</html>​

这是 JavaScript:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.onload = function() {
    // I've also put a console.log here at one point, and it does get called.
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = "data:image/jpeg;base64,/9j/4QNMR..."; // cut for sanity.

var outputCanvas = $("#finalImage")[0];
var outputContext = outputCanvas.getContext('2d');

// If I uncomment this line, the image is drawn.
//context.drawImage(image, 0, 0, canvas.width, canvas.height);

// If I change canvas to image, its also drawn, which means it is being loaded.
// But it seems to indicate to me that onload gets called too early.
outputContext.drawImage(canvas, 0, 0);​

Here is the link to the JSFiddle. .

如果您发现它有什么问题，请告诉我，因为现在已经弄乱了它很长时间了。

谢谢!

最佳答案

outputContext.drawImage(canvas, 0, 0);​ 在 context.drawImage(image, 0, 0, canvas.width, canvas.height); 之前调用保证outputContext绘制到canvas之后就是将其放入onload函数

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var image = new Image();
var outputCanvas = $("#finalImage")[0];
var outputContext = outputCanvas.getContext('2d');
image.onload = function() {
    // I've also put a console.log here at one point, and it does get called.
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    outputContext.drawImage(canvas, 0, 0);​
};
image.src = "data:image/jpeg;base64,/9j/4QNMR..."; // cut for sanity.

http://jsfiddle.net/mowglisanu/ruKht/14/

关于javascript - 当我传入图像数据字符串(基数 64)时，图像加载似乎被提前调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13908327/

27 4 0
文章推荐： javascript - animate.css 因动态内容而失败
文章推荐： html - 如何阻止 flex 元素离开容器
文章推荐： c++ - Pthreads 和信号 C++
文章推荐： javascript - php 到 ajax textarea 变量不显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com