Question

下面是我的脚本，效果很好。

但是现在我的图片网址在脚本底部是静态的，

但是我想使用文件上传按钮使其动态化。

表示如果我从上传按钮中选择了一个文件，则它将预览两个图像。

下面是该行

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

固定我的图像的位置。我想从文件上传按钮获取此URL。

请帮助我使其动态化。

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>

Answer 1

在file input中选择文件时，该文件仅位于临时存储器中，而不在服务器上。因此，您将无法显示它。

为了执行所需的操作，您可以添加上载文件的表单，上载文件后可以显示它或使用FileReader。但是这个问题已经回答了，所以请在提出问题之前先尝试自己找到解决方案。

Here is an answer with FileReader

如何直接从JavaScript中的文件上传按钮上传图像

1 个答案: