如何直接从javascript中的文件上传按钮上传图像
[英]How to upload image directly from file upload button in javascript
问题描述
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.我想从文件上传按钮获取这个 URL。
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 个解决方案
解决方案1
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.当您在file input选择文件时，它仅在临时内存中，而不在服务器上。 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 .为了做你想做的事情，你可以添加一个上传文件的表单，在文件上传后你可以显示它或使用FileReader 。 But this question was already answered, so please before asking a question try to find the solution by your own first.但是这个问题已经回答了，所以请在提出问题之前先尝试自己找到解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.