gpt4 book ai didi

javascript - .toDataURL() 正在保存透明图像而不是实际图像

转载 作者:行者123 更新时间:2023-11-28 05:38:09 26 4
gpt4 key购买 nike

toDataURL() 正在保存在 Canvas 上绘制的黑色覆盖/背景;但不是通过链接在同一 Canvas 上绘制图像。如果我只绘制一个图像并尝试将其保存为图像,则保存的是透明图像。

我研究了很多东西,但对我的情况没有任何效果。

Image link

我附上了 image为了更好地理解...

代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
</style>
</head>
<body>

<?php
$user=$_POST['h'];
?>

<canvas id="can" width=250 height=250 ></canvas>

<script type="text/javascript">

//first canvas
var c = document.getElementById('can');
c.setAttribute('crossOrigin','anonymous');
var ctx = c.getContext("2d",{preserveDrawingBuffer: true});

var img = new Image();
img.addEventListener("load", function() {
ctx.drawImage(img, 0, 0);
}, false);
img.src = '<?php echo $user ?>';

ctx.globalCompositeOperation = "source-over";

ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.fillRect(0,0,c.width,c.height);

var sent = convertToImg(c);
document.body.appendChild(sent);
console.log(sent);

function convertToImg(imgc) {

var img = new Image;
img.src = imgc.toDataURL("image/png");
return img;

}


</script>
</body>
</html>

最佳答案

图片加载是异步的,加载完成后即可获取源

顺便说一句,您可以直接使用 canvas.toDataURL。

关于javascript - .toDataURL() 正在保存透明图像而不是实际图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38068676/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com