-
Posts
17 -
Joined
-
Last visited
Awards
This user doesn't have any awards
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
ArjhanToteck's Achievements
-
ArjhanToteck changed their profile photo
-
Ok, so I tried appending imageCanvas to the body and it is a completely transparent canvas for some reason, being the problem. I had made a typo while writing base64Src. The function works fine with images that aren't transparent at all, but when I try to use it with semi-transparent images, it gets a Y value that's much higher than, not just the first non-transparent pixel, but also the image's Y axis. Edit: The canvas draws the image on imageCanvas to the left of where its supposed to be for some reason. Not sure why it works with non-transparent images but it doesn't with semi-transparent ones. Second Edit: So apparently I subtracted where I should've added. That was it. I have this now: highestPoint = this.y + highestPoint;
-
I have been trying to get the Y position of the highest pixel in an image that is not transparent. I want a function where you input an X coordinate and the minimum opacity for a pixel to be considered transparent. It returns the Y coordinate of the highest point of this, the visible image in the canvas, from the imputed X coordinate. I tried this, and am not sure what I got wrong: this.highestPoint = function(x, transparency = 1) { var imageCanvas = document.createElement("CANVAS"); var imageCtx = imageCanvas.getContext("2d"); imageCanvas.width = canvas.width; imageCanvas.height = canvas.height; var image = new Image(); image.src = this.base64Src; imageCtx.drawImage(image, this.x, this.y, this.width, this.height); var highestPoint = -1; var imageData = imageCtx.getImageData(x, this.y, 1, this.height).data; for(var i = 1; i < (imageData.length + 1) / 4; i++){ if(imageData[i * 3] >= transparency){ console.log(i) highestPoint = i; break; } } if(highestPoint != -1){ highestPoint = this.y - highestPoint + 1; } return highestPoint; }
-
I want to store multiple variables and objects in the cloud. I am aware about databases, but I can't find one that is both free and user-friendly. Does anyone have any solution? Thanks in advance.
-
Thanks, it works now.
-
I tried using that site, it didn't work. Maybe I did something wrong?
-
Erasing Rectangles Over An Image in HTML/JS/CSS
ArjhanToteck replied to ArjhanToteck's topic in Programming
Wow; it worked! Thank you!- 5 replies
-
- js
- javascript
-
(and 4 more)
Tagged with:
-
Basically, I'm writing a program that allows a user to create and export maps. I can't get JavaScript to export the map (a canvas) because it is "tainted." I tried looking this up and tried to fix the error multiple times in multiple ways, but nothing worked. Here is some of the code for exporting in case it helps: <img id="exportImage" crossorigin="Anonymous"> <script> function exportMap(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var img = document.getElementById("exportImage") // save canvas image as data url (png format by default) img.crossorigin = "Anonymous"; var dataURL = canvas.toDataURL(); console.log(dataURL) document.getElementById("exportImage").src = dataURL; } </script> Thanks in advance!
-
Erasing Rectangles Over An Image in HTML/JS/CSS
ArjhanToteck replied to ArjhanToteck's topic in Programming
And nobody's replied in two months. Great.- 5 replies
-
- js
- javascript
-
(and 4 more)
Tagged with:
-
Erasing Rectangles Over An Image in HTML/JS/CSS
ArjhanToteck replied to ArjhanToteck's topic in Programming
So I worked with two canvases the way you suggested, thank you, and wrote a function to erase the rectangles on the second canvas. But I ran into a new problem that is probably a simple fix; the program does erase and draw properly, but the full image is no longer displayed, only a small piece of the uploaded image is displayed. Here is the code, in case the problem is just some kind of syntax error I didn't notice: <!DOCTYPE html> <html> <head> <title>Dungeon Crawler</title> <style> #title { font-variant: small-caps; font-size: 50px; } </style> </head> <body> <h1 id = "title">Dungeon Crawler</h1> <b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span> <input type="button" id = "back" value="Back" onclick="back()" /> <p> <span id = "tools"> <select id="coverOrUncover"> <option value="uncover"> Uncover</option> <option value="cover"> Cover </option> </select> the map with a brush size of <input type="text" value = "50" name = "size" id = "size"> pixels. </span> <div style="position: relative;"> <canvas id="imageCanvas" width="100" height="100" style="position: absolute; left: 0; top: 50; z-index: 0;"></canvas> <canvas id="drawingCanvas" width="100" height="100" style="position: absolute; left: 0; top: 50; z-index: 1;"></canvas> </div> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> var ii = document.getElementById("drawingCanvas"); ii.style.display = "none"; var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; var x = document.getElementById("back"); x.style.display = "none"; var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">" function handleImage(e){ var ii = document.getElementById("drawingCanvas"); ii.style.display = "block"; var vv = document.getElementById("tools"); vv.style.display = "block"; var v = document.getElementById("title"); v.style.display = "none"; var w = document.getElementById("imageCanvas"); w.style.display = "block"; document.getElementById("imageLoader").innerHTML = "" document.getElementById("size").value = "50" var y = document.getElementById("importMapText"); y.style.display = "none"; var z = document.getElementById("back"); z.style.display = "block"; // ^ shows stuff that need to and hides things that don't var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); // ^ Prints the image to the canvas } function back(){ var ii = document.getElementById("drawingCanvas"); ii.style.display = "none"; var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">" var y = document.getElementById("importMapText"); y.style.display = "block"; var z = document.getElementById("back"); z.style.display = "none"; // ^ shows stuff that need to and hides things that don't } </script> <script> var canvas = document.getElementById('imageCanvas'); var width1 = canvas.width; var height1 = canvas.height; drawingCanvas.width = width1; // in pixels drawingCanvas.height = height1; // in pixels var sketchProc = function(processingInstance) { with (processingInstance) { size(700, 400); frameRate(30); // Draws on Map // ___________________________________________ var isMouseDown = false; var size = document.getElementById("size").value; size = parseInt(size, 10); draw = function() { size = document.getElementById("size").value; size = parseInt(size, 10); var coverOrUncover = document.getElementById("coverOrUncover").value; var c = document.getElementById("drawingCanvas"); var ctx = c.getContext("2d"); drawingCanvas.onmousedown = function(){ isMouseDown = true }; drawingCanvas.onmouseup = function(){ isMouseDown = false }; document.onmousedown = function() { if(isMouseDown) { if(coverOrUncover === "cover"){ fill(0, 0, 0); noStroke(); rect(mouseX - (size/2), mouseY - (size/2), size, size); } else if(coverOrUncover === "uncover"){ ctx.clearRect(mouseX - (size/2), mouseY - (size/2), size, size); } } } document.onmousemove = function() { if(isMouseDown) { if(coverOrUncover === "cover"){ fill(0, 0, 0); noStroke(); rect(mouseX - (size/2), mouseY - (size/2), size, size); } else if(coverOrUncover === "uncover"){ ctx.clearRect(mouseX - (size/2), mouseY - (size/2), size, size); } } }; }; }}; // Get the canvas that Processing-js will use var canvas = document.getElementById("drawingCanvas"); // Pass the function sketchProc (defined in myCode.js) to Processing's constructor. var processingInstance = new Processing(canvas, sketchProc); </script> </body> </html>- 5 replies
-
- js
- javascript
-
(and 4 more)
Tagged with:
-
Erasing Rectangles Over An Image in HTML/JS/CSS
ArjhanToteck replied to ArjhanToteck's topic in Programming
Maybe I can place a canvas on top of another, one with the image and the other with the user drawing and erasing, but I don't know how.- 5 replies
-
- js
- javascript
-
(and 4 more)
Tagged with:
-
I am trying to make a program where the user uploads a map and can cover it and uncover it. I can manage to write a code to allow the user to cover the map, but not to uncover the map. I am trying to use CSS sprites that take a piece of the uploaded image and makes that what the user paints. Since the image is uploads, it does not have a url, so using CSS sprites does not work. Is there a way to use CSS sprites, or an easier way? Note: The image is in an HTML canvas. Here is the program, if showing it helps: <!DOCTYPE html> <html> <head> <title>Dungeon Crawler</title> <style> #title { font-variant: small-caps; font-size: 50px; } </style> </head> <body> <h1 id = "title">Dungeon Crawler</h1> <b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span> <input type="button" id = "back" value="Back" onclick="back()" /> <p> <span id = "tools"> <select id="coverOrUncover"> <option value="uncover"> Uncover</option> <option value="cover"> Cover </option> </select> the map with a brush size of <input type="text" value = "50" name = "size" id = "size"> pixels. </span> <canvas id="imageCanvas"></canvas> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; var x = document.getElementById("back"); x.style.display = "none"; var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">" function handleImage(e){ var vv = document.getElementById("tools"); vv.style.display = "block"; var v = document.getElementById("title"); v.style.display = "none"; var w = document.getElementById("imageCanvas"); w.style.display = "block"; document.getElementById("imageLoader").innerHTML = "" document.getElementById("size").value = "50" var y = document.getElementById("importMapText"); y.style.display = "none"; var z = document.getElementById("back"); z.style.display = "block"; // ^ shows stuff that need to and hides things that don't var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); // ^ Prints the image to the canvas } function back(){ var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">" var y = document.getElementById("importMapText"); y.style.display = "block"; var z = document.getElementById("back"); z.style.display = "none"; // ^ shows stuff that need to and hides things that don't } </script> <script> var sketchProc = function(processingInstance) { with (processingInstance) { size(700, 400); frameRate(30); // ProgramCodeGoesHere var size = document.getElementById("size").value; size = parseInt(size, 10); var coverOrUncover = document.getElementById("coverOrUncover").value; draw = function() { size = document.getElementById("size").value; size = parseInt(size, 10); fill(0, 0, 0); noStroke(); rect(mouseX, mouseY, size, size); }; }}; // Get the canvas that Processing-js will use var canvas = document.getElementById("imageCanvas"); // Pass the function sketchProc (defined in myCode.js) to Processing's constructor. var processingInstance = new Processing(canvas, sketchProc); </script> </body> </html>
- 5 replies
-
- js
- javascript
-
(and 4 more)
Tagged with:
-
Ignore this
-
Here's a good challenge; help me with this.
- 3 replies
-
- javascript
- html
-
(and 3 more)
Tagged with: