diff --git a/data/scripts/loadImage.js b/data/scripts/loadImage.js index b80b6d58..d7b0efb9 100644 --- a/data/scripts/loadImage.js +++ b/data/scripts/loadImage.js @@ -6,6 +6,9 @@ function loadImage(event, destination, arg) { var dataURL = reader.result destination.src = dataURL destination.cropped = false + if (destination == imgWatermark) { + imgWatermark.whiteToTransparent = false + } } reader.readAsDataURL(input.files[0]) } diff --git a/data/scripts/whiteToTransparent.js b/data/scripts/whiteToTransparent.js index 1d08d266..c88cc7c1 100644 --- a/data/scripts/whiteToTransparent.js +++ b/data/scripts/whiteToTransparent.js @@ -1,56 +1,35 @@ - var transparentCanvas = document.createElement("canvas") var transparentContext = transparentCanvas.getContext("2d") -//transparentCanvas.onload = function() { - //document.body.appendChild(transparentCanvas) //For testing purposes only -//} -transparentCanvas.onload = function() { - alert("WHAT") -} -//document.body.appendChild(transparentCanvas) +document.body.appendChild(transparentCanvas) + //Function that auto the image -function whiteToTransparent(url, destination) { +function whiteToTransparent(targetImage) { //Create image, size canvas, draw image - var imgTempSetSymbol = new Image() - imgTempSetSymbol.crossOrigin = "anonymous" - imgTempSetSymbol.src = url - imgTempSetSymbol.onload = function() { - if (imgTempSetSymbol.width > 0 && imgTempSetSymbol.height > 0) { - transparentCanvas.width = imgTempSetSymbol.width - transparentCanvas.height = imgTempSetSymbol.height - transparentCanvas.drawImage(imgTempSetSymbol, 0, 0) + var imgTemporary = new Image() + imgTemporary.crossOrigin = "anonymous" + imgTemporary.src = targetImage.src + imgTemporary.onload = function() { + if (imgTemporary.width > 0 && imgTemporary.height > 0) { + transparentCanvas.width = imgTemporary.width + transparentCanvas.height = imgTemporary.height + transparentContext.drawImage(imgTemporary, 0, 0) //declare variables var width = transparentCanvas.width var height = transparentCanvas.height - var pix = {x:[], y:[]} var imageData = transparentContext.getImageData(0,0,transparentCanvas.width,transparentCanvas.height) var x, y, index //Go through every pixel and for (y = 0; y < height; y++) { for (x = 0; x < width; x++) { - //(y * width + x) * 4 + 3 calculates the index at which the alpha value of the pixel at x, y is given - index = (y * width + x) * 4 + 3 - if (imageData.data[index] > 0) { - //pix is the image object that stores two arrays of x and y coordinates. These stored coordinates are all the visible pixels - pix.x.push(x) - pix.y.push(y) + index = (y * width + x) * 4 + if (imageData.data[index] >= 250 && imageData.data[index + 1] >= 250 && imageData.data[index + 2] >= 250) { + imageData.data[index + 3] = 0 } } } - //sorts the arrays numerically - pix.x.sort(function(a,b){return a-b}) - pix.y.sort(function(a,b){return a-b}) - var n = pix.x.length - 1 - //Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas - width = pix.x[n] - pix.x[0] - height = pix.y[n] - pix.y[0] - var transparentImage = transparentContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1) - //Resizes the canvas and draws image - transparentCanvas.width = width + 1 - transparentCanvas.height = height + 1 - transparentContext.putImageData(transparentImage, 0, 0) - //Saves the newly image to the given image - destination.src = transparentCanvas.toDataURL() + transparentContext.clearRect(0, 0, width, height) + transparentContext.putImageData(imageData, 0, 0) + targetImage.src = transparentCanvas.toDataURL() } } } diff --git a/index.html b/index.html index f4e1340a..cd26561b 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ -