为什么我需要两次按下拉动按钮以获取画布和base64格式的图像
<!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("
<!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.
After creating canvas, I converted it to base64 format to show in <img src="" id="cnimg" alt="base64" />.
But the problem is : I need to press DRAW button two times to get canvas and base64 formatted image.
If I remove imageEl.setAttribute("crossOrigin", "anonymous"); then I am getting canvas, but I am not getting base64 formatted image and also getting an error.
Error :
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以在HTML上添加
crossorigin，它将起作用，以下是一个示例：我受过良好教育的猜测您最初的问题是，在脚本中更改crossorigin会影响图像，可能会导致重新加载，而当我们尝试绘制图像时没有重新加载，这就是为什么第二次工作的原因。
我在您的代码中添加的一个改进是：
＆lt; img src =“” id =“ cnimg” alt =“ base64” /＆gt; < /code>
我将您的这将显示
src更改为透明的1x1像素映像，为了不显示我所做的任何事情，我减少了很多代码以专注于问题，您应该在您的问题，最小的代码更有可能获得更快的回应
You can add the
crossOriginon the html and it will work, below is an example:My educated guess your original problem is that changing the crossOrigin in script affects the image, probably causes a reload, and when we try to draw the image has not reloaded, that is why it works the second time.
One improvement I added to your code was:
I changed your
<img src="" id="cnimg" alt="base64" />that will display
srcto a transparent 1x1 pixel image, to not show anythingI did reduced a lot of your code to just focus on the problem, you should do the same on your questions, minimal code makes more likely to get faster response