我需要你的帮助:)
所以我跟随了一个关于用画布制作双色的教程。它先将图像转换为灰度，然后再转换为双色调。现在我试图下载画布为PNG，但它下载了一个空图像。
"看起来你的帖子主要是代码;请补充更多的细节。我不知道怎样才能知道更多的细节:
有办法修复吗?
我是个新手。提前谢谢
<html>
<head> </head>
<body>
<div id="main">
<canvas id="duotone" width="600" height="600"></canvas>
</div>
<script>
function Duotone(id, src, primaryClr, secondaryClr, actions = (ctx) => null) {
let canvas = document.getElementById(id);
let ctx = canvas.getContext("2d");
let downloadedImg = new Image();
downloadedImg.crossOrigin = "";
downloadedImg.onload = function() {
ctx.drawImage(downloadedImg, 0, 0, canvas.width, canvas.height);
imageData = ctx.getImageData(0, 0, 800, 800);
const pixels = imageData.data;
for (let i = 0; i < pixels.length; i += 4) {
const red = pixels[i];
const green = pixels[i + 1];
const blue = pixels[i + 2];
const avg = Math.round((0.299 * red + 0.587 * green + 0.114 * blue) * 1);
pixels[i] = avg;
pixels[i + 1] = avg;
pixels[i + 2] = avg;
}
ctx.putImageData(imageData, 0, 0);
ctx.globalCompositeOperation = "multiply";
ctx.fillStyle = primaryClr;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "lighten";
ctx.fillStyle = secondaryClr;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
downloadedImg.src = src;
}
function randomIndex() {
return Math.floor(Math.random() * 3);
}
function randomizeColors() {
// Arrays of colors, with a random index chosen when clicked.
let primary = ["#f65e35", "#00ff36", "#77acd4"];
let secondary = ["#1e3265", "#23278a", "#033dc5"];
let ind = randomIndex();
Duotone(
"duotone",
"https://i.imgur.com/WQ1Iydl.jpeg",
primary[ind],
secondary[ind],
);
}
function downloadImage() {
document.querySelector("#image").src = document
.querySelector("#duotone")
.toDataURL("image/png");
}
var canvas = document.getElementById("duotone");
var image = canvas.toDataURL();
var aDownloadLink = document.createElement('a');
aDownloadLink.download = 'canvas_image.png';
aDownloadLink.href = image;
aDownloadLink.click();
randomizeColors();
</script>
</body>
</html>你想下载的东西还没有准备好，你必须等待它完全加载。
window.onload = function () {
var canvas = document.getElementById("duotone");
var image = canvas.toDataURL();
var aDownloadLink = document.createElement("a");
aDownloadLink.download = "canvas_image.png";
aDownloadLink.href = image;
aDownloadLink.click();
};