-2

Below is my script which was working fine.

But right now my image url was static at bottom of the script,

But i want to make it dynamic using file upload button.

Means if i select a file from upload button, then it will preview both images.

Below is the line 

img.src = "https://image.ibb.co/bGtv0z/Product_Two.jpg";

where my image was fixed. i want to get this URL from file upload button.

Please help me to make it dynamic.

var img = new Image(),
  $canvas = $("<canvas>"),
  canvas = $canvas[0],
  context;

var removeBlanks = function(imgWidth, imgHeight) {
  var imageData = context.getImageData(0, 0, imgWidth, imgHeight),
    data = imageData.data,
    getRBG = function(x, y) {
      var offset = imgWidth * y + x;
      return {
        red: data[offset * 4],
        green: data[offset * 4 + 1],
        blue: data[offset * 4 + 2],
        opacity: data[offset * 4 + 3]
      };
    },
    isWhite = function(rgb) {
      // many images contain noise, as the white is not a pure #fff white
      return rgb.red > 242 && rgb.green > 240 && rgb.blue > 240;
    },
    scanY = function(fromTop) {
      var offset = fromTop ? 1 : -1;

      // loop through each row
      for (var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {

        // loop through each column
        for (var x = 0; x < imgWidth; x++) {
          var rgb = getRBG(x, y);
          if (!isWhite(rgb)) {
            return y;
          }
        }
      }
      return null; // all image is white
    },
    scanX = function(fromLeft) {
      var offset = fromLeft ? 1 : -1;

      // loop through each column
      for (var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {

        // loop through each row
        for (var y = 0; y < imgHeight; y++) {
          var rgb = getRBG(x, y);
          if (!isWhite(rgb)) {
            return x;
          }
        }
      }
      return null; // all image is white
    };

  var cropTop = scanY(true),
    cropBottom = scanY(false),
    cropLeft = scanX(true),
    cropRight = scanX(false),
    cropWidth = cropRight - cropLeft,
    cropHeight = cropBottom - cropTop;

  var $croppedCanvas = $("<canvas>").attr({
    width: cropWidth,
    height: cropHeight
  });

  // finally crop the guy
  $croppedCanvas[0].getContext("2d").drawImage(canvas,
    cropLeft, cropTop, cropWidth, cropHeight,
    0, 0, cropWidth, cropHeight);

  $("#oldimg").
  append("<p>same image with white spaces cropped:</p>").
  append($croppedCanvas);
  console.log(cropTop, cropBottom, cropLeft, cropRight);
};

img.crossOrigin = "anonymous";
img.onload = function() {
  $canvas.attr({
    width: this.width,
    height: this.height
  });
  context = canvas.getContext("2d");
  if (context) {
    context.drawImage(this, 0, 0);
    $("#newimg").append("<p>original image:</p>").append($canvas);

    removeBlanks(this.width, this.height);
  } else {
    alert('Get a real browser!');
  }
};

// define here an image from your domain
img.src = "https://image.ibb.co/bGtv0z/Product_Two.jpg";
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<body style="background-color:#ddd">
 <input type="file" src="">
  <div id="oldimg"></div>
  <div id="newimg"></div>
</body>
Rajnikant Bajpai
  • 47
  • 7
  • Possible duplicate of [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – Krzysztof Janiszewski Aug 21 '18 at 07:27
  • No, Please try to run my code..then you will get what i am asking, Bcoz right now my script is running on page load and image URL was fixed inside code...but i want to run my script when i select a file from button and then display result in two divs like my code
    – Rajnikant Bajpai Aug 21 '18 at 07:34

1 Answers1

0

When you choose a file in file input it is only in temporary memory and not on a server. Thus you will be unable to display it.

In order to do to what you want, you can either add a form that uploads the file and after file upload you can display it or use a FileReader. But this question was already answered, so please before asking a question try to find the solution by your own first.

Here is an answer with FileReader

Krzysztof Janiszewski
  • 3,542
  • 3
  • 15
  • 33
  • No, Please try to run my code..then you will get what i am asking, Bcoz right now my script is running on page load and image URL was fixed inside code...but i want to run my script when i select a file from button and then display result in two divs like my code
    ..i am not getting how to make it dynamic by changing some lines of code..thats why i am here..so plz help me to do this if u understand.     – Rajnikant Bajpai Aug 21 '18 at 07:34
  • Yes really sorry i forgot to paste. now file upload button is there in code...i want when i select new image from file upload button, then it will display output with selected image in my div in form of original image and new image. – Rajnikant Bajpai Aug 21 '18 at 07:42