我正在嘗試使用 html 和 javascript 制作一個非常簡單的人臉影像生成器，用戶可以在其中選中一些復選框并將部分人臉添加到其中。復選框是一個表單，我希望用戶能夠在他們點擊提交按鈕時下載他們創建的 png/jpg 影像。（或者讓它自動下載，沒關系）。我嘗試搜索它，但我真的找不到除了 html2canvas 之外的任何東西，我不允許使用它。
這是 html 代碼（最小可重現版本）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body id="pageBody">
<form action="" id="form">
<label for="body">Body</label><input type="checkbox" name="body" id="body">
<label for="eyes">Eyes</label><input type="checkbox" name="eyes" id="eyes">
<label for="nose">Nose</label><input type="checkbox" name="nose" id="nose">
<label for="mouth">Mouth</label><input type="checkbox" name="mouth" id="mouth">
<label for="hat">Hat</label><input type="checkbox" name="hat" id="hat">
<input type="submit" value="submit">
</form>
<br>
<div id="pic">
<img id="bodyImg" src="imgs/body.png"/>
<img id="eyesImg" src="imgs/eyes.png"/>
<img id="mouthImg" src="imgs/mouth.png"/>
<img id="noseImg" src="imgs/nose.png"/>
<img id="hatImg" src="imgs/hat.png"/>
</div>
</body>
</html>
有什么建議？
uj5u.com熱心網友回復：
好吧，你可能不需要SVG部分，如果你只是想把影像放在一起然后讓用戶保存，那么你只需要Image to Canvas，然后保存畫布。
我在這里創建了一個小提琴，它基本上加載了 4 個影像，然后將它們并排放置在畫布上，然后您就可以下載了。不幸的是，不能使用 SO 片段，因為它太沙盒以至于無法作業，但小提琴作業正常。
const svg = document.querySelector('svg');
const canvas = document.querySelector('canvas');
const button = document.querySelector('button');
const ctx = canvas.getContext("2d");
function loadImg(src) {
return new Promise((resolve, reject) => {
const i = new Image();
i.setAttribute('crossOrigin', 'anonymous');
i.src = src;
i.onload = () => resolve(i);
i.onerror = (e) => reject(e);
});
}
async function doIt() {
const [i1, i2, i3, i4] = await Promise.all([
loadImg("https://picsum.photos/id/237/100/150"),
loadImg("https://picsum.photos/id/238/100/150"),
loadImg("https://picsum.photos/id/239/100/150"),
loadImg("https://picsum.photos/id/240/100/150")
]);
ctx.drawImage(i1, 0, 0);
ctx.drawImage(i2, 100, 0);
ctx.drawImage(i3, 0, 150);
ctx.drawImage(i4, 100, 150);
}
function save() {
const i = canvas.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
location.href = i;
}
doIt();
button.addEventListener('click', save)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/373244.html
標籤：javascript html 形式 图片
下一篇：使用PHP呈現條件HTML元素