HTML canvas element not displaying image
Question
I was trying to use this tutorial to make a color picker. I am not very familiar with the canvas element, so I am just testing with the code from that link. I set the image src with a few different images, and none of them are appearing.
I'm not sure what i'd have to change to make it appear, but I tried changing the src, and that is not the problem. Basically when you click on the color wheel (the image on the canvas) an alert should pop up with the rgba value.
If I had to guess, maybe the problem is here? I would think you need an src before telling it what to do when it loads.
image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height);
image.src="https://i.stack.imgur.com/flqeC.jpg?s=256";
This is a jsfiddle with the code I have. I'm not the most experienced so this may be silly fix, but I appreciate any help!
2 answers
solution1
1 2019-07-16 16:59:47
In local its working fine here is full code
<!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>
solution2
0 2019-07-16 06:17:38
Use Local Path of Image save that image in your local server otherwise you will get cross origin issue and then use this code
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.