Jump to content

ArjhanToteck

Member
 View Profile  See their activity

  • Posts

    17

  • Joined

  • Last visited

 Content Type 

Everything posted by ArjhanToteck

  1. ArjhanToteck
    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;
  2. ArjhanToteck
    imageData[i * 3] always evaluates to 0 for some reason, so the function returns -1.
  3. ArjhanToteck
    Yes, this is JavaScript. The method outputs the RGBA data of each pixel. Transparency is just the name of the parameter in the function, which by default is equal to one.
  4. ArjhanToteck
    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; }
  5. ArjhanToteck
    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.
  6. ArjhanToteck
    Thanks, it works now.
  7. ArjhanToteck
    I tried using that site, it didn't work. Maybe I did something wrong?
  8. ArjhanToteck
    Wow; it worked! Thank you!
  9. ArjhanToteck
    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!
  10. ArjhanToteck
    And nobody's replied in two months. Great.
  11. ArjhanToteck
    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>
  12. ArjhanToteck
    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.
  13. ArjhanToteck
    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>
  14. ArjhanToteck
    Ignore this
  15. ArjhanToteck
    Here's a good challenge; help me with this.
  16. ArjhanToteck
    (I accidentaly made this)
  17. ArjhanToteck
    I'm the friend Duckster was talking about. What you should do is assign a blank variable to the textbox where the characters are being typed. Then you can make another variable and assign the length of the first variable to the second variable. For example, let text let characters Then you should add a variable called var1 and then make a loop that sets the value of characters to the length of text as long as var1 = 0, and within it an if statement that tests the amount of characters and alerts the user if there are more than 750 characters. var var1 = 0 while(chracters < 751){ characters = text.length if(characters === 750|| characters > 750){ overMax() } } function overMax(){ \\ add alert lines here. } Depending on what you're file or application is, you can add the alert in the \\add alert lines here spot. This might work as the alert function; function overMax(){ alert("You have 750 characters. You might want to save now to prevent losing some work in case of the program crashing.") }
×