精华内容
下载资源
问答
  • 首先,楼主为什么需要用JS获取img标签的二进制数据?因为他想在不借助CORS/JSONP等技术的前提下绕过同源策略。由于img标签本身支持跨域读取数据,所以很容易就会想到通过img加载外部资源,然后通过JS读取源内的img的...

    专门登录账号来回答,我想问的是,上面几个回答有谁是看懂问题在问啥吗,或者说问题想达到什么目的?

    首先,楼主为什么需要用JS获取img标签的二进制数据?因为他想在不借助CORS/JSONP等技术的前提下绕过同源策略。由于img标签本身支持跨域读取数据,所以很容易就会想到通过img加载外部资源,然后通过JS读取源内的img的二进制数据。以上是前提

    那么我们来看看上面几个回答,几乎都是通过Canvas来获取图片blob。在跨域的情况下是否可行?你们试验一下就可以看到:

    Firefox:

    SecurityError: The operation is insecure. index.html:28

    getBase64Image http://127.0.0.1/index.html:28

    onload http://127.0.0.1/index.html:11

    Chrome:

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    at getBase64Image (http://127.0.0.1/index.html:28:26)

    at Image.image.onload (http://127.0.0.1/index.html:11:18)

    都是告诉你,此操作存在安全问题,被禁止了。为什么被禁止?因为这个Canvas是跨域资源。你能想到通过这种方式跨域,搞浏览器内核那帮人肯定也想到了。那么我们来看看MDN上是怎么说的:

    通常不允许_跨域读操作(Cross-origin reads)。但常可以通过内嵌资源来巧妙的进行读取访问。例如可以读取嵌入图片的高度和宽度,调用内嵌脚本的方法,或availability of an embedded resource.

    如果你的数据仅仅是一个数字的话,其实你可以写进图片的meta data里然后跨域获取的。其他复杂数据的话,还是老老实实用CORS或JSONP吧

    展开全文
  • 在 mysql 数据库中是无法直接存放图片文件的,但如果将图片通过 php 程序转换成二进制数据就可以很轻松的存放到数据库中了。那么这篇文章就说一下,利用 php 将图片文件转换二进制数据的方法。php 图片二进制数据...

    在 mysql 数据库中是无法直接存放图片文件的,但如果将图片通过 php 程序转换成二进制数据就可以很轻松的存放到数据库中了。那么这篇文章就说一下,利用 php 将图片文件转换二进制数据的方法。

    php 图片转二进制数据的方法

    方法1:

    php fread() 函数读取打开的文件(二进制的方法)

    示例代码:<?php

    $img = 'feiniaomy.jpg'; // 图片的存放在地址

    $fp = fopen($img, 'rb'); // 打开图片

    $content = fread($fp, filesize($img));//二进制数据

    echo $content; //输出二进制数据

    //这里输出到浏览器的是乱码

    ?>

    方法二:

    php file_get_contents() 读取图片,转为二进制数据

    示例代码:<?php

    $img = 'xx.jpg'; //图片的地址

    echo file_get_contents($img);

    //这里输出到浏览器的是乱码

    ?>

    php 输出二进制图片的方法

    php 向浏览器输出二制的图片,只需要加个 header 头来声明一下图片类型即可!

    例:<?php

    //声明为图片类型,发送header头

    header( "Content-type: image/jpeg");

    $img = 'xx.jpg';

    $size = filesize($img );

    $fp= fopen($img, 'r');

    $data = fread($fp, $size);//二进制数据

    echo $data; //输出图片的二进制数据

    ?>

    注:

    发送的 header 要根据具体情况而定,不一定都是image/jpeg。JPG格式的图片就是image/jpeg,但PNG格式的图片有可能需要声明为 image/png,实际应用中个人应当测试一下。

    黑蜘蛛

    展开全文
  • 说明:这段代码主要是将input[file]中的图片转换成二进制码,之后可以直接放入img标签中显示,也可以用于数据传输。字段说明:obj:文件,document.getElementById("xxx").files[0]area:区域大小callback:回调函数...

    做聊天的时候需要图片的二进制码作为缩略图,研究了大半天找到了这个方法。

    说明:这段代码主要是将input[file]中的图片转换成二进制码,之后可以直接放入img标签中显示,也可以用于数据传输。

    字段说明:

    obj:文件,document.getElementById("xxx").files[0]

    area:区域大小

    callback:回调函数,其中_canvas参数就是图片的二进制码var ImageHelper = {

    getThumbnail: function (obj, area, callback) {

    var canvas = document.createElement("canvas"), context = canvas.getContext('2d');

    var img = new Image();

    img.onload = function () {

    var target_w;

    var target_h;

    var imgarea = img.width * img.height;

    if (imgarea > area) {

    var scale = Math.sqrt(imgarea / area);

    scale = Math.ceil(scale * 100) / 100;

    target_w = img.width / scale;

    target_h = img.height / scale;

    }

    else {

    target_w = img.width;

    target_h = img.height;

    }

    canvas.width = target_w;

    canvas.height = target_h;

    context.drawImage(img, 0, 0, target_w, target_h);

    try {

    var _canvas = canvas.toDataURL("image/jpeg", 0.5);

    _canvas = _canvas.substr(23);

    callback(obj, _canvas);

    }

    catch (e) {

    console.log(e);

    callback(obj, null);

    }

    };

    img.src = ImageHelper.getFullPath(obj);

    },

    getFullPath: function (file) {

    window.URL = window.URL || window.webkitURL;

    if (window.URL && window.URL.createObjectURL) {

    return window.URL.createObjectURL(file);

    }

    else {

    return null;

    }

    }

    };

    用例:ImageHelper.getThumbnail(othis.find('input')[0].files[0], 60000, function (obj, data) {

    focusInsert(thatChat.textarea[0], "img["+data+"]");

    sendMessage();

    });

    页面上显示

    在src中加入data:image/png;base64,再加上_canvas的内容

    展开全文
  • 本问题已经有最佳答案,请猛点这里访问。我在研究或试图弄清楚如何(如果它甚至可能)从类型文件的html输入元素使用...我可以拍摄图像,将其保存在数据库中(作为二进制数据),然后在发布后从二进制数据中显示页...

    本问题已经有最佳答案,请猛点这里访问。

    我在研究或试图弄清楚如何(如果它甚至可能)从类型文件的html输入元素使用JavaScript / jQuery获取二进制图像数据时遇到了麻烦。

    我正在使用WebMatrix(C#),但如果仅使用JavaScript / jQuery可以回答这个问题的目的,则可能没有必要知道。

    我可以拍摄图像,将其保存在数据库中(作为二进制数据),然后在发布后从二进制数据中显示页面上的图片。然而,在上传之前,这确实让我没有图片预览,我几乎可以肯定我必须使用AJAX。

    同样,这甚至可能都不可能,但只要我能获得二进制图像数据,我相信我可以用AJAX将它推送到服务器并以与从数据库中获取它时相同的方式处理图像(请注意,我不使用GUID保存图像文件,所有这些,我只保存二进制数据)。

    如果有一种更简单的方法来显示使用输入元素的图片预览,那当然也可以正常工作,因为我尝试这样做的整个想法是在他们点击提交表单按钮之前显示图片预览(或至少创造这种错觉)。

    ********** UPDATE ***********

    我不认为这是另一个问题的重复,因为,我真正的问题是:

    如何使用JavaScript / jQuery从输入类型"文件"获取图像数据?

    如果我可以将数据(格式正确)返回给服务器,我应该可以在那里使用它,然后用AJAX返回它(尽管,我绝对不是AJAX专家)。

    根据我所做的研究,没有办法在仅使用javascript的所有IE版本中获取图片预览(这是因为他们认为获取完整文件路径是潜在的安全风险)。我可以要求我的用户将该网站添加到受信任的网站,但您通常不会要求用户篡改这些类型的设置(更不用说让您的网站对用户显得怀疑的最快方法就是直接让他们要求将您的网站添加到可信站点列表。这就像发送电子邮件并要求输入密码。"只要相信我!我太安全了!":)

    尝试查看答案[这里] [1]。 [1]:stackoverflow.com/questions/4459379/

    @PavelAnossov我唯一遗憾的是你的答案是你没有把它放在真正的答案表格中,而且我无法投票说出答案8000次! 为什么这种解决方案在互联网上不再普及? 完美地工作! 比我试图做的更容易! 如果你发表答案,我很乐意接受!

    我确实把它作为答案,它被转换成评论作为一个简单的答案。

    @PavelAnossov好吧,那很臭......哈哈

    @PavelAnossov是否有一个版本在IE中工作而不必使用AJAX或服务器端?

    简短的回答:使用jQuery表单插件,它支持类似AJAX的表单提交甚至文件上传。

    TL;博士

    缩略图预览是流行的网站,通常由多个步骤完成,基本上网站做这些步骤:

    上传RAW图像

    调整大小并优化图像以进行数据存储

    生成到该文件的临时链接(通常存储在服务器维护的HTTP会话中)

    将其发回给用户,以启用"预览"

    实际上在用户确认图像后存储图像

    一些不好的解决方案是:

    大多数现代浏览器都有选项来启用对本地文件的脚本访问,但通常您不会要求用户修改这些低级别设置。

    早期的Internet Explorer(啊...是的,这是一种耻辱)和现代浏览器的古老版本将通过读取文件输入框的"值"来公开完整的文件路径,您可以直接生成标记并使用该值。 (现在用一些c:/ fakepath / ......替换它。)

    使用Adobe Flash模仿文件选择面板,它可以正确读取本地文件。但将其传递给JavaScript是另一个话题......

    希望这些有帮助。 ;)

    UPDATE

    我实际上遇到过需要在上传之前进行预览的情况,我还想把它放在这里。我记得,现代浏览器中没有过渡版本在屏蔽真实文件路径之前没有实现FileReader,但如果是这样,请随时纠正我。这个解决方案应该适合大多数浏览器,只要它们受jQuery支持。

    // 1. Listen to change event

    $(':file').change(function() {

    // 2. Check if it has the FileReader class

    if (!this.files) {

    // 2.1. Old enough to assume a real path

    setPreview(this.value);

    }

    else {

    // 2.2. Read the file content.

    var reader = new FileReader();

    reader.onload = function() {

    setPreview(reader.result);

    };

    reader.readAsDataURL();

    }

    });

    function setPreview(url) {

    // Do preview things.

    $('.preview').attr('src', url);

    }

    谢谢你的回复,真的非常感谢你们展示了什么不该做的。我可以看到有些人尝试你在这里列出的东西是不好的解决方案,甚至我也能看到它们的缺点。但是,我确实非常回避插件。我永远无法完全控制它们或为我的特定目的进行完全集成。然而,上述评论者确实把我送到了这个网站,这是完美的!

    FileReader是在HTML5时代推出并实现的,很高兴知道你只针对新的浏览器。兼容性是一个真正的头痛。 ;)

    嗯....没有意识到它在IE中不起作用并且研究这表明我必须使用AJAX或临时文件来使其在那里工作。这是真的?或者有没有办法像这个解决方案一样将IE包含在JavaScript中?可能不是,但也许我只是不让他们有预览,如果他们使用IE浏览器。毕竟,如果你使用IE而不是你应该没有特权......

    你做出了选择。通常说,边缘技术更好地被认为是一些基本功能的附加功能,因为它们不像传统方式那样得到保证。

    展开全文
  • python中显示图片有多种方式,如利用,matplotlib,Opencv,PIL等。写网络爬虫时有时需要显示图片,你可以通过先保存图片,再显示图片;也有的想直接显示图片,不保存图片在本地。这里以matplotlib为例显示图片读取本地...
  • 控制台依然输出:JPG改进:因为文件流的前10个位置是保存的文件类型的信息根据这个规律:public enum FileType2 {FILE;private static final Map FILE_TYPES;static {FILE_TYPES = new HashMap();FILE_TYPES.put("PNG",...
  • 浏览图片OpenFileDialog ofd = new OpenFileDialog();ofd.InitialDirectory = @"E:\";ofd.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files(*.*)|*.*";ofd.RestoreDirectory = true;if (ofd....
  • ---------------------------------------------------------------- var fileInput = document.getElementById("file"); var file = fileInput.... php如何写 ,获取到上传的图片二进制数据? js部分是否有错误?
  • 展开全部直接上代62616964757a686964616fe4b893e5b19e31333262383565码了,应该看得懂吧,str字符串的内容就是你XML里的内容。生成的a.jpeg我也给上传上来了,是个报表噢importjava.io.File;importjava.io....
  • 二进制数据图片 前言 最近公司那台终端电脑的粘贴功能坏了, 连接远程想从里面拿一个文件出来, 试了好多种方法不顶用, 远程终端开了一堆程序也不能随便重启远程终端, 最终是关了一大堆不必要的应用, 又重启了下...
  • JavaScript如何转换二进制数据显示成图片
  • * 图片类* @author Haroldphp@163.com* @version 1.0*PHP默认只识别application/x-www.form-urlencoded标准的数据类型。因此,对型如text/xml 或者 soap 或者 application/octet-stream 之类的内容无法解析,如果用$...
  • // 通过attach的id属性读取图片,api接口返回图片二进制数据getImage(MyAttach attach) async {Dio dio = Dio();SharedPreferences sp = await SharedPreferences.getInstance();dio.options.baseUrl = ServerUrl....
  • php保存二进制原始数据图片的程序代码得到post过来的二进制原始数据,选择一个生成路径及图片的名字,之后写入,思路很显而易见//生成图片$imgDir = 'uploadImg/';$filename="nissangcj".$mobile.".jpg";///要生成...
  • php图片转换成二进制的方法:首先获取...这次记录的东西很简单,就是把图片转成二进制数据存到数据库中,以及取出数据输出图片显示。图片转二进制方式一:$img = '111111.jpg';$fp= fopen($img, 'rb');$content =...
  • 获取二进制数据流 $data = file_get_contents('php://input'); 指定文件保存路径 $dirName = ROOT_PATH . 'public' . DS . 'upload/images/' . date('Ymd'); 创建文件夹 ! is_dir($dirName) && mkdir($...
  • 使用vi或vim查看图片二进制数据 首先放一张没有问题的图片到虚拟机中,图片格式我只测试了jpg和bmp,都可以,然后输入指令: vi -b image.bmp 或 vim -b image.bmp 然后就出现如下界面,也可能你的系统没有装vi或...
  • 本文主要介绍了如何把接收到的二进制图片信息转换成图片并保存起来,大概流程为:接收数据流,判断图片信息,转换并保存为图片三个步骤。/*** 图片类PHP默认只识别application/x-www.form-urlencoded标准的数据...
  • 概述通过前三篇博客,我们能够了解在通过WebSocket发送数据之前,我们需要传递的数据是如何变成ArrayBuffer二进制数据的;在我们收到二进制数据之后,我们又如何将其变成了JavaScript中的常见数据类型。本文作为...
  • 我就废话不多说了,还是直接看代码吧 public static byte[] ... } 以上这篇Android 实现图片二进制流及二进制转字符串就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
  • 图片转为base64后,因其编码格式特殊(将每三个字节拆分成四个字节),会使图片大小变为原来的4/3(清晰度不会发生任何变化),与二进制数据表示图片相比,这在上传较大图片以及较多图片时会占用较多的内存空间。...
  • 用axios接收到的后台的图片二进制乱码: 要使其显示为图片的形式,要对二进制流进行一个转换。 在页面初始化完成时,就发出获取验证码的请求,将其放在mounted钩子函数中: mounted: function () { this....
  • /// ///调用webservice将图片二进制流上传到服务器/// /// 上传图片的服务地址/// /// 文件的二进制流/// 名称...我这里填"file"就没错了,,,,/// contentType的值(这里传的是图片类型为:image/jpeg)/// 键值对,...
  • 本例子的目的在于测试往oracle数据库中插入blob字段public static string getimgstr(string imgfile){//将图片文件转化为字节数组字符串,并对其进行base64编码处理inputstream in = null;byte[] data = null;//读取...
  • 原文:https://huan1993.iteye.com/blog/2433552最近在学习netty相关的知识,看到netty可以实现 websoket,因此记录一下在netty中实现websocket的步骤,主要实现传递文本消息和传递二进制消息,传递二进制消息由于...
  • } */ 在PHP中读取二进制文件 很多时候,数据并不是用文本的方式保存的,这就需要将二进制数据读取出来,还原成我们需要的格式.PHP在二进制处理方面也提供了强大的支持. 任务 下面以读取并分析一个PNG图像的文件头为例,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,182
精华内容 46,072
关键字:

获取图片二进制数据