如何直接從javascript中的文件上傳按鈕上傳圖像

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 。 但是這個問題已經回答了，所以請在提出問題之前先嘗試自己找到解決方案。

這是FileReader的答案

如何直接從javascript中的文件上傳按鈕上傳圖像

問題描述

1 個解決方案

解決方案1
0 2018-08-21 07:27:00

如何直接從javascript中的文件上傳按鈕上傳圖像

問題描述

1 個解決方案

解決方案1 0 2018-08-21 07:27:00

解決方案1
0 2018-08-21 07:27:00