How to upload image directly from file upload button in javascript
Question
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>
1 answers
solution1
0 2018-08-21 07:27:00
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.