<!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>
<style>
button {
padding: 10px 50px;
cursor: pointer;
}
.custom {
width: 200px;
height: 200px;
}
.canvas-container {
border: 5px solid #000;
margin-bottom: 10px;
margin-top: 10px;
}
</style>
<script>
const draw = () => {
const availableImages = [1, 2];
let canvas = document.querySelector("#screenShotCanvas");
var context = canvas.getContext("2d");
let image = document.querySelector("#cnimg");
canvas.width = availableImages.length * 700;
canvas.height = 450;
var promises = availableImages.map((img, index) => {
var imageEl = document.getElementById(`img${index + 1}`);
imageEl.setAttribute("crossOrigin", "anonymous");
imageEl.height = 450;
imageEl.width = 700;
context.drawImage(imageEl, index * 700, 0, 700, 450);
return img;
});
Promise.all(promises)
.then(() => {
var canvasImg = canvas.toDataURL();
console.log("????canvasImg????");
console.log(canvasImg);
image.src = canvasImg;
})
.catch((error) => {
console.log("⚠️ERROR⚠️");
console.error(error.message);
});
};
</script>
</head>
<body>
<button onclick="draw()">DRAW</button>
<div class="canvas-container">
<h2>Canvas image will show here once you click DRAW button</h2>
<canvas id="screenShotCanvas"></canvas>
</div>
<div>
<img
class="custom"
src="https://cdn.pixabay.com/photo/2016/02/05/19/51/stained-glass-1181864_960_720.jpg"
id="img1"
/>
<img
class="custom"
src="https://cdn.pixabay.com/photo/2018/10/08/13/05/hindu-3732713_960_720.jpg"
id="img2"
/>
</div>
<div>
<h2>Base 64 converted image will show here.</h2>
<img src="" id="cnimg" alt="base64" />
</div>
</body>
</html>In the above code snippet, there are two static images from pixabay.com.
When you press DRAW button, it will generate a canvas which is the combination of those two images.
创建画布后，我将其转换为base64格式以在<img src="" id="cnimg" alt="base64" />中显示.
But the problem is :我需要按两次DRAW按钮才能得到画布和base64格式的图像.
如果我删除imageEl.setAttribute("crossOrigin", "anonymous");，那么我会得到画布，但我不会得到base64格式的图像，也会得到一个错误.
未能对"HTMLCanvaElement"执行"toDataURL":可能无法导出受污染的画布.
