Javascript HTML画布元素不显示图像
我试着用教程制作一个颜色选择器。我对canvas元素不是很熟悉，所以我只是使用该链接中的代码进行测试。我用几个不同的图像设置了图像src，但是没有一个出现 我不确定我必须改变什么才能让它出现，但我尝试了改变src，这不是问题所在。基本上，当您单击色轮（画布上的图像）时，会弹出带有rgba值的警报 如果让我猜的话，也许问题就在这里？我想你需要一个src，然后再告诉它加载时该怎么做Javascript HTML画布元素不显示图像,javascript,html,css,html5-canvas,Javascript,Html,Css,Html5 Canvas,我试着用教程制作一个颜色选择器。我对canvas元素不是很熟悉，所以我只是使用该链接中的代码进行测试。我用几个不同的图像设置了图像src，但是没有一个出现 我不确定我必须改变什么才能让它出现，但我尝试了改变src，这不是问题所在。基本上，当您单击色轮（画布上的图像）时，会弹出带有rgba值的警报 如果让我猜的话，也许问题就在这里？我想你需要一个src，然后再告诉它加载时该怎么做 image.onload = () => canvasContext.drawImage(image, 0, 0
image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height);
image.src="https://i.stack.imgur.com/flqeC.jpg?s=256";
是一个jsfiddle，包含我的代码。我不是最有经验的，所以这可能是愚蠢的修复，但我感谢任何帮助 使用图像的本地路径将该图像保存在本地服务器中，否则将出现跨源问题，然后使用此代码
function initColorPicker()
{
var canvasEl = document.getElementById('colorCanvas');
var canvasContext = canvasEl.getContext('2d');
var image = new Image(250, 250);
image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height);
image.src="https://i.stack.imgur.com/flqeC.jpg?s=256";
canvasEl.addEventListener('click', function(mouseEvent) {
{
var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
var rgba = imgData.data;
alert("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
}
})
}
initColorPicker();
在本地，它的工作很好，这里是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background-color: red;
}
#colorCanvas {
border: 1px solid #000000;
background-color:blue
}
</style>
</head>
<body>
<h1>Test</h1>
<canvas id="colorCanvas" class="color-canvas" width="250" height="250"></canvas>
</body>
<script type="text/javascript">
function initColorPicker() {
var canvasEl = document.getElementById('colorCanvas');
var canvasContext = canvasEl.getContext('2d');
var image = new Image(250, 250);
image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height);
image.src = "http://localhost/test/assets/img/color.jpg";
canvasEl.addEventListener('click', function (mouseEvent) {
{
var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
var rgba = imgData.data;
alert("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
}
})
}
initColorPicker();
</script>
</html>
标题
身体{
背景色：红色；
}
#彩色帆布{
边框：1px实心#000000；
背景颜色：蓝色
}
试验
函数initColorPicker（）{
var canvasEl=document.getElementById（'colorCanvas'）；
var canvasContext=canvasEl.getContext（'2d'）；
var图像=新图像（250250）；
image.onload=（）=>canvasContext.drawImage（image，0，0，image.width，image.height）；
image.src=”http://localhost/test/assets/img/color.jpg";
canvasEl.addEventListener（'click'，函数（mouseEvent）{
{
var imgData=canvasContext.getImageData（mouseEvent.offsetX，mouseEvent.offsetY，1,1）；
var rgba=imgData.data；
警报（“rgba”（“+rgba[0]+”、“+rgba[1]+”、“+rgba[2]+”、“+rgba[3]+”））；
}
})
}
initColorPicker（）；
警报中的值initColorPicker（）getImageData（）