php实现 data url的图片生成与保存 原创

Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。

语法：

data:image/jpg;    声明数据协议及类型名称
base64,               编码形式为base64
/9j/4AAQSkZ……    base64编码结果

Data URL的生成方法（php）：

<?php  $img_file = file_get_contents("http://www.jb51.net/img/logo_s2.png");  echo base64_encode($img_file);

注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担，总之有利有弊。

那么我们如何把网站上的Data URL格式的图片转存成实际图片呢？

其实很简单，我们把图片内容就是src部分传到后台,保存即可。

$img_content // 图片内容
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $img_content, $result)){
 $type = $result[2];
 $new_file = "./test.{$type}";
 if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $img_content)))){
  echo '新文件保存成功：', $new_file;
 }
}
赞 (0)

相关推荐

  • PHP 将dataurl转成图片image方法总结

    PHP 将dataurl转成图片image方法 使用canvas 生成的图片,是使用dataurl的,php无法直接通过file_put_contents方法保存到本地电脑,需要做一下转码. 图片dataurl 如下 $imgstr = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5E

  • getAsDataURL在Firefox7.0下无法预览本地图片的解决方法

    用uchome普通上传来举例,取原代码:return obj.files.item(0).getAsDataURL(); 升级到Firefox7.0后,需要改为:return window.URL.createObjectURL(obj.files[0]); 实际上就是Firefox7.0废弃了item属性.

  • 快速解决Canvas.toDataURL 图片跨域的问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested res

  • php实现 data url的图片生成与保存 原创

    Data URL是在本地直接绘制图片,不是从服务器加载,所以节省了HTTP连接,起到加速网页的作用. 语法: data:image/jpg;    声明数据协议及类型名称 base64,               编码形式为base64 /9j/4AAQSkZ--    base64编码结果 Data URL的生成方法(php): <?php  $img_file = file_get_contents("http://www.jb51.net/img/logo_s2.png"

  • JavaScrip如果基于url实现图片下载

    1.H5 download属性 function downFile(content, filename) { // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 字符内容转变成blob地址 var blob = new Blob([content]); eleLink.href = URL.createObj

  • Java Springboot如何基于图片生成下载链接

    现有一些图片在服务器上的链接,在浏览器中打开这些链接是直接显示在浏览器页面的形式. 现在需要生成这些图片的单独下载以及打包下载链接,即在浏览器中打开下载链接后弹出下载框提示下载.由于前端存在跨域问题,所以图片下载由后台接口完成. 首先编写文件下载工具类: import java.net.URL; import java.net.MalformedURLException; import org.apache.commons.io.FileUtils; public class FileDownl

  • vue 解决data中定义图片相对路径页面不显示的问题

    vue在data中定义图片相对路径: data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; } 页面使用vant的标签栏自定义图标: <van-tabbar v-model="active"> <van-tabbar-item inf

  • vue.js根据图片url进行图片下载

    vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题: 这是后台返回来的json数据(防止泄露重要信息IP地址打码了): 我在html里的引用是这样的: <a @click="downCom" > 下载执照 <i class="icon-down"></i> </a>

  • JS如何理解data URL

    目录 概述 初识data URL data URL语法 字符串base64编解码的多种语言实现 1.unix  2.javascript  3.nodejs 4.python 5.php 6.java 7..net data URL常见问题 概述 canvas有一个非常常用的方法canvas.toDataURL(),它会将canvas转化为data URL的格式. 通常情况下这个data URL的类型为image. 看看下面的例子: <canvas id="canvas" hei

  • Python 通过URL打开图片实例详解

    Python 通过URL打开图片实例详解 不论是用OpenCV还是PIL,skimage等库,在之前做图像处理的时候,几乎都是读取本地的图片.最近尝试爬虫爬取图片,在保存之前,我希望能先快速浏览一遍图片,然后有选择性的保存.这里就需要从url读取图片了.查了很多资料,发现有这么几种方法,这里做个记录. 本文用到的图片URL如下: img_src = 'http://wx2.sinaimg.cn/mw690/ac38503ely1fesz8m0ov6j20qo140dix.jpg' 1.用Open

  • 根据URL下载图片至客户端、服务器的简单实例

    1.保存至服务器 根据路径保存至项目所在服务器上. String imgUrl="";//图片地址 try { // 构造URL URL url = new URL(imgUrl); // 打开连接 URLConnection con = url.openConnection(); // 输入流 InputStream is = con.getInputStream(); // 1K的数据缓冲 byte[] bs = new byte[1024]; // 读取到的数据长度 int le

  • Objective C从远程url下载图片方法汇总

    Objective C从远程url下载图片 - (UIImage *) getImageFromURL: (NSString *)theURL { UIImage *theImage = NULL; NSString *imageFileName = [BT_strings getFileNameFromURL:theURL]; NSData *imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:theUR

  • SpringBoot实现前端验证码图片生成和校验

    SpringBoot下实现前端验证码图片的生成和校验,供大家参考,具体内容如下 1.效果 点击验证码可以获取新的验证码 2.原理 后台生成验证码图片,将图片传到前台. 后台在session中保存验证码内容. 前台输入验证码后传到后台在后台取出session中保存的验证码进行校验. 注意,验证码的明文是不能传送到前端的.前端内容都是透明的,不安全.验证码是用来防机器人并不是单单防人.如果把验证码明文传到前端很容易就会被破解. 3.图片生成 验证码生成工具类RandomValidateCodeUti

随机推荐