替换数据的所有图像(以SRC / URL标记):图像 [英] Replace all images (with src/url tag) with data:image

查看:203
本文介绍了替换数据的所有图像(以SRC / URL标记):图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我必须保存在SQL数据库(一个Android应用程序)的HTML源代码code。内容必须存储的地方。所以图像也必须保存。我认为这将是适当的进行如下:


    服务器(PHP)在
  • :更换IMG SRC =所有IMG SRC:(?正则表达式和加载图片)数据的图片...字符串

  • 然后,我可以在HTML code本地存储在我的机应用

但我怎么能实现呢?或者我应该保存HTML5的图像?我希望你能帮帮我!

更新:

  $搜索='(小于?IMG * SRC =)?([^] *(\\ / [^ /] * \\ [^] +) );
$替换=< IMG SRC = \\data_uri('$ 2')\\方式>,
$内容= preg_replace($搜索,替换$,$内容);

有人能解决这个code?谢谢!

月2日更新:

例如:

 < IMG类=alignnoneSRC =HTTPS://lh4.googleuserco(...)
< IMG SRC =HTTPS://lh4.googleuserco(...)
&所述; IMG WIDTH =400HEIGHT =100SRC =...(...)


解决方案

替换您的< IMG SRC =image.pngALT =图像> < IMG SRC =<?PHP的回声data_uri(image.png);?>中ALT =图像> 和定义下列函数在适当情况下:

 函数data_uri($文件名){
    $哑剧= mime_content_type($文件名);
    $数据= base64_en code(的file_get_contents($文件名));    回报的数据:$哑剧;的base64,$数据;
}

您可能会结束了巨大的HTML文件,所以也许存储之外的数据库是更好的文件?我不熟悉的Andr​​oid,但在iOS上可以设置的WebView的基本路径显示HTML文件,像<一个href=\"http://stackoverflow.com/questions/5051364/load-the-image-saved-in-sdcard-in-webview\">this.

更新

我创建了一个(content.php)包含了几个IMG元素的然后跑就可以了以下内容:

  $内容=的file_get_contents('content.php');
$搜索='/(小于IMG \\ S + SRC =\\'])([^\\'] +)([\\'] \\ S + [^&GT;] +&GT;)/';
$内容= preg_replace_callback($搜索,create_function(
        '$匹配',
        返回$匹配[1]。 data_uri($比赛[2])。 $比赛[3];'
    ),$内容);

在code,你在你的问题贴出你的模式失踪斜线,你也就会结束了刚刚从字面上运行 data_uri('$ 2')(即,$ 2被用作参数的实际字符串)。 preg_replace_callback 允许您访问由preg_replace发现的实际值。

总之,code以上将替换的返回值的由 data_uri ,从而建立具有数据IMG元素的所有图片URI的。你可能想提高模式一点,因为它目前假设属性是由双引号,没有别的,和封闭也的src属性是元素的第一个属性,这就是为什么XML解析一般建议,我认为。这样做的严重程度取决于你的输入数据偏离航向。

更新2

一个更通用的解决方案是将它分成两个正则表达式按我的最新评论。这是第一次修改您的搜索模式进入搜索$ ='(] +>)';然后执行 preg_replace_callback($搜索,img_handler',$内容); 已经定义了 img_handler 功能因为是这样的:

 函数img_handler($匹配){
    $ image_element = $匹配[1];    $模式='/(SRC =\\'])([^\\'] +)([\\'])/';
    $ image_element; = preg_replace_callback($模式,create_function(
            $匹配,
            $匹配[1]。 data_uri($比赛[2])。 $匹配[3]),
        $ image_element);    返回$ image_element;
}

此工作的方式是与第一正则表达式识别所有ING元件(),并将它们发送到回调函数img_handler,这反过来又仅替换的src属性。
XML是更复杂(但方式更通用的)一点。我没有时间去拼凑一个例子,但是它是相当有据可查的。请查看 DOM文档或的 SimpleXML的基本上做同样的事情。

最后

您现在已经修改了你的问题的两倍,并将这肯定需要澄清的时候,我觉得我们渐行渐远,从最初的问题。我建议让您的问题简洁,专注于一个单一的主题。如果答案或意见,提出了一些本身并不回答进一步的问题,它可能是更好的开始就这一问题一个新的线程(如的替换img元素的src属性),或寻找任何类似已经提出的问题。

I must save html source code in a sql database (for an android app). The content must stored local. So images must also saved. I think it would be appropriate to proceed following:

  • on the server (php): replace all img src with img src="data:image..." strings (regex and load image?)
  • then I could store the html code local in my appliction

But how could I realize this? Or should I save the images with html5? I hope you could help me!

UPDATE:

$search = '(<img.*?src=")([^"]*?(\/[^/]*\.[^"]+))';
$replace = "<img src=\"".data_uri('$2')."\">";
$content = preg_replace($search, $replace, $content);

Could someone correct this code? Thanks!

2nd UPDATE:

Examples:

<img class="alignnone" src="https://lh4.googleuserco (...)
<img src="https://lh4.googleuserco (...)
<img width="400" height="100" src='...' (...)

解决方案

Replace your <img src="image.png" alt="An image"> with <img src="<?php echo data_uri('image.png'); ?>" alt="An image"> and define the following function where appropriate:

function data_uri($filename) {
    $mime = mime_content_type($filename);
    $data = base64_encode(file_get_contents($filename));

    return "data:$mime;base64,$data";
}

You'll probably end up with huge html files, so perhaps storing the files outside of the database is better? I'm not familiar with Android, but on iOS you can set the base path of the webview displaying your html files, something like this.

UPDATE:

I created a (content.php) containing a couple of img elements an then ran the following on it:

$content = file_get_contents('content.php');
$search = '/(<img\s+src=["\'])([^"\']+)(["\']\s+[^>]+>)/';
$content = preg_replace_callback($search, create_function(
        '$matches',
        'return $matches[1] . data_uri($matches[2]) . $matches[3];'
    ), $content);

In the code you posted in your question your pattern was missing slashes, and you also would have ended up just literally running data_uri('$2') (that is, $2 being the actual string used as parameter). preg_replace_callback allows you to access the actual value found by preg_replace.

Anyway, the code above will replace all images with the value returned by data_uri, and thus build up img elements with data URI's. You might want to improve the pattern a bit, as it currently assumes attributes are enclosed by double-quotes and nothing else, and also that the src attribute is the first attribute of the element, which is why XML parsing is generally advised I think. The severity of this depends on you input data off course.

UPDATE 2:

A more generic solution would be to split it into two regexes as per my latest comment. That is first modify your search pattern into $search = '(]+>)'; and then do preg_replace_callback($search, 'img_handler', $content); having defined your img_handler function as something like this:

function img_handler($matches) { 
    $image_element = $matches[1]; 

    $pattern = '/(src=["\'])([^"\']+)(["\'])/'; 
    $image_element; = preg_replace_callback($pattern, create_function( 
            $matches, 
            $matches[1] . data_uri($matches[2]) . $matches[3]), 
        $image_element); 

    return $image_element; 
}

The way this works is that the first regex identifies all ing elements () and sends them to the callback function img_handler, which in turn replaces only the src attribute. XML is a bit more complex (but way more generic). I don't have time to put together an example, but it's quite well documented. Check out DOMDocument or SimpleXML which basically does the same thing.

IN CLOSING:

You have now modified your question twice, and will this is surely needed for clarification at times, I feel that we are drifting further and further away from the initial question. I would suggest keeping your questions concise and focused on a single subject. If the answers or comments raises further questions that aren't answered in themselves it is probably better to start a new thread on that matter (e.g. replacing the src attribute of an img element) or look for any similar already asked questions.

这篇关于替换数据的所有图像(以SRC / URL标记):图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆