Tag: 图像

节点JsmeteorJs图像file upload图像损坏

我有一个将图像文件保存到本地文件系统的问题。 正如你可以在屏幕截图中看到的，Code在我的位置创build一个文件，但是文件不可读。 我在储蓄的过程中想念什么？ 以下是屏幕截图的更多详细信息： https ： //forums.meteor.com/t/saving-image-with-javascript-node-to-filesystem/21761

上传图像作为二进制数据认知服务与节点

我正在尝试将Microsoft Cognitive服务面部API传递给用户上传的图像。 该图像在上传文件夹中的服务器上可用。 微软希望这个图像是“application / octet-stream”，并作为二进制数据传递。 目前我无法find一种方法将图像传递给API，使其被接受，并继续接收“解码错误，图像格式不受支持”。 据了解，图像必须以blob或文件格式上传，但是对于NodeJs而言，我还不确定如何实现这一点。 到目前为止，我有这个，看了几个选项，但都没有工作，其他选项我试着返回simmilar错误，如“文件太小或大”，但是当手动testing通过邮差相同的图像，它工作正常。 image.mv('./uploads/' + req.files.image.name , function(err) { if (err) return res.status(500).send(err); }); var encodedImage = new Buffer(req.files.image.data, 'binary').toString('hex'); let addAPersonFace = cognitive.addAPersonFace(personGroupId, personId, encodedImage); addAPersonFace.then(function(data) { res.render('pages/persons/face', { data: data, personGroupId : req.params.persongroupid, personId : req.params.personid} ); })

获取一幅图像在另一幅图像中的位置

我有一个显示网站的浏览器截图。 现在我想找出网站（视口）的位置（相对于整个屏幕截图）。 在这个图像中看到一个带有黑色边框的矩形： 在开始image processing之前，我有可能向网站的DOM添加任何东西。 我已经尝试生成QR码，将其添加到视口的左上angular和右下angular，然后使用imagemagick来确定QR码在较大图像中的位置： compare -metric "rmse" -subimage-search -dissimilarity-threshold "0.1" -virtual-pixel "edge" "haystack.png" "needle.png" "results.png" 然而，这需要很长的时间。 事实上，我在40分钟后辞职了。 我使用了QR码，因为通过使用时间戳，我可以确信这张图片不会在网站的其他地方find。 此外，截图中QR码的大小是原始QR码的两倍，但我想这是由于我的Mac屏幕有144dpi。 我正在使用node.js，所以我需要任何可以通过命令行（如imagemagick ）执行的东西，以便我可以从节点或直接节点模块执行它。 我有一个优势，就是我可以select想要在更大的图像中search的图像。 我猜测要find的确切知识可能是一个有用的信息来加速过程（但我不知道如何使用这些信息）。

主要图片难题 – Node.js Express服务器

所以我们有一个Node.js的后端工具，它为img标签提供了一个HTML网页。 我们用一个工人child_process做这个，以免阻塞主进程。 我们在服务器上这样做的原因是因为在尝试使用AJAX / Angular $ http访问HTML页面时遇到了CORS问题。 当后端网页抓取工具完成后，它可以向浏览器发送一个url列表。 浏览器可以对与这些URL相关的图像发出AJAX请求，但就我所知，前端将遇到与检索HTML相同的CORS问题。 所以我们现在有一个相当糟糕的解决scheme来解决这个问题。 我们使用Cloudinary来完成繁重的工作，而不是我们的Node.js服务器处理base64。 后端工作者child_process抓取HTML，获取图像URL，然后发送一个请求到Cloudinary来检索图像，并发回我们的服务器新的Cloudinaryurl。 然后，我们将Cloudinaryurl发送到前端，前端可以访问这些Cloudinaryurl，而无需任何CORS问题。 这有两个问题： 这是相当缓慢的 – 刮了大约2秒，然后等待Cloudinary保存图像和响应另外2-4秒。 所以浏览器必须等待4-6秒。 我们最终在Cloudinary中存储了大量的图像，这将变得昂贵。 在这个过程之后，我们最终可以删除大约90％的图像，因为用户只会select浏览器中显示的图像，但是我们担心即使图像驻留在Cloudinary几秒钟。 有没有人有这些问题的经验，认为他们有一个比我们正在使用的更好的解决scheme？

从Node.js应用程序提供图像的最佳方式（使用快递）

我们设置了一个公共文件夹，其中包含50个可移植networkinggraphics格式的小图像，基本上是用于工具栏devise的图标（45×45像素）。 考虑以下用于使用express设置公用文件夹的Node.js代码： app.configure(function AppConfig() { app.set('port', 8080); app.use(express.bodyParser()); app.use(express.errorHandler()); app.use(express.cookieParser()); app.use(express.static(app.root + '/app/public')); // <== contains 50 icons in .png format app.engine('html', require('hbs').__express); app.set('views', app.root + '/views/html'); app.set('view engine', 'html'); }); 由于第一页始终是“login”页面，因此我希望在用户inputlogin详细信息时，所有工具栏图标图像都将caching在第一页加载自己的背景上。 在search如何在后台执行此操作时，我遇到了Image Sprite概念 。 但我需要不同的解决scheme来caching尚未请求的图像。 有没有人能告诉我如何做到这一点？ 更新：我试图使用标签本身请求一个单一的图像（.png），这是所有50 大小：0.76MB的图像精灵，现在当我加载login页面加载图像，然后用户可以看到用户界面。 所以问题是我想它先显示用户界面，然后加载像AJAX背景的图像。

在Node.js中对图像应用半透明水印

我有一个图像，并希望使用Node.js应用水印（另一个图像）。 要求是水印不应该是一个坚实的图片（我可以做的与gm库的绘制（）），但一半透明。 你能build议任何工具使用？

通过Webpack在模块中导入图像

我正在使用NodeJs，webpack＆ES2015为我的应用程序。 我似乎无法弄清楚如何导入我的模块中的图像。 以下不起作用。 import "../../css/image/t1.png"; 编辑：根据锡蒂安的要求，这里是我的webpackconfiguration： const webpack = require( "webpack" ); const path = require( "path" ); const merge = require( "webpack-merge" ); const TARGET = process.env.npm_lifecycle_event; process.env.BABEL_ENV = TARGET; const PATHS = { app : path.join( __dirname, "app" ), build : path.join( __dirname, "build" ) }; const common = { entry : { […]

JavaScript图像预加载不正确的工作

我有一个JS / jQuery脚本在页面上dynamic追加图像。 我正在使用节点作为服务器。 我已经添加了日志服务器端，我注意到，每当有一个“追加”完成，页面问服务器的图像，即使它总是相同的两个图像被追加。 现在，这种情况发生在Chrome浏览器上，而不是Mozilla上，图片只加载一次。 我认为这将是caching; 但是caching不被禁用。 此外，我已经尝试通过在页面的开始处使用正确的src创build一个Image对象来进行一些预加载：同样的问题。 即使它是一个浏览器caching设置，我不想build立一个网站，其中禁用caching的用户与我的服务器无用的请求相同的图像…任何build议？

无法使用MEAN堆栈显示图像

我正在使用MEAN堆栈，并试图显示存储在我的Mongo数据库中的图像。 我相信图像被正确存储并正确传递到浏览器，因为当我使用Web控制台，并看看我的post响应身体显示图像的响应。 我有一个表，当一个单击行时，它会打电话给我的控制器： $scope.detailRequest = function(index){ $scope.selectedRow = index; $scope.selected = this.contact; $http.post('/DetailRequest', $scope.selected).success(function(response){ $scope.detailResponse = response; }); }; 在节点我查询Mongo并返回图像： router.post('/DetailRequest', function(request, response) { reports .findOne({_id : request.body._id}) .select('img') .exec(function (err, research) { response.contentType(research.img.contentType); response.send(research); }); }); 我正在使用ng-src进行图像显示。 正如我在页面顶部提到的，我可以在Web控制台的Response Body中正确地看到图像。 因此，我有信心将图像传回浏览器。 <img ng-src="{{detailResponse}}"> 图像不会显示

如何处理与webpack服务器端的静态资产？

我试图创build一个通用的反应应用程序（在服务器和客户端上使用webpack），并与图像导入斗争。 我想写这个： import someImage from './someImage.png' const SomeImage = () => <img src={someImage}/> 这是我的webpackconfiguration文件： var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://127.0.0.1:8080/', 'webpack/hot/only-dev-server', './client', 'babel-polyfill' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { modulesDirectories: ['node_modules', 'shared'], extensions: ['', '.js', '.jsx'] }, module: […]