如何直接从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