0
toDataURL() speichert die schwarze Überlagerung/Hintergrund, die auf Leinwand gezeichnet wird; aber nicht das Bild wird auf der gleichen Leinwand durch einen Link gezeichnet. Wenn ich nur ein Bild zeichne und versuche, es als Bild zu speichern, wird das transparente Bild gespeichert..toDataURL() speichert transparentes Bild anstelle des tatsächlichen Bildes
Ich habe viele Dinge recherchiert, aber nichts hat in meinem Fall funktioniert.
Ich habe ein image zum besseren Verständnis angebracht ...
Hier ist der Code:
<!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>
toDataURL Funktion, um eine Daten: URL zu erhalten, die das Base-64-kodierte Bild hat. Beachten Sie, dass das Bild vollständig geladen sein muss, oder Sie erhalten nur ein leeres (schwarzes, transparentes) Bild zurück. – Vicky
deshalb habe ich einen Event-Listener hinzugefügt ... Ist es in Ordnung? ansonsten schlage mir eine andere Technik vor ... Danke! –