如何从 base64 数据 URI 在服务器端保存 PNG 图像

2023-11-28

我正在使用 Nihilogic 的“Canvas2Image”JavaScript 工具将画布绘图转换为 PNG 图像。 我现在需要的是使用 PHP 将此工具生成的这些 base64 字符串转换为服务器上的实际 PNG 文件。

简而言之,我目前正在做的是使用 Canvas2Image 在客户端生成一个文件,然后检索 base64 编码的数据并使用 AJAX 将其发送到服务器:

// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);   

image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);

var url = 'hidden.php',
data = $('#canvasimage').attr('src');

$.ajax({ 
    type: "POST", 
    url: url,
    dataType: 'text',
    data: {
        base64data : data
    }
});

此时,“hidden.php”收到一个数据块,如下所示数据:图像/png;base64,iVBORw0KGgoAAAANSUhEUgAABE...

从这一点开始,我就很困惑了。从我读到的内容来看,我相信我应该使用 PHP图像从字符串创建函数,但我不确定如何从 base64 编码的字符串实际创建实际的 PNG 图像并将其存储在我的服务器上。 请帮忙!


您需要从该字符串中提取 base64 图像数据,对其进行解码,然后可以将其保存到磁盘,您不需要 GD,因为它已经是 png 了。

$data = 'data:image/png;base64,AAAFBfj42Pj4';

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);

file_put_contents('/tmp/image.png', $data);

顺便说一句:

$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));

提取、解码和检查错误的有效方法是:

if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {
    $data = substr($data, strpos($data, ',') + 1);
    $type = strtolower($type[1]); // jpg, png, gif

    if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
        throw new \Exception('invalid image type');
    }
    $data = str_replace( ' ', '+', $data );
    $data = base64_decode($data);

    if ($data === false) {
        throw new \Exception('base64_decode failed');
    }
} else {
    throw new \Exception('did not match data URI with image data');
}

file_put_contents("img.{$type}", $data);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 base64 数据 URI 在服务器端保存 PNG 图像 的相关文章

  • 如何在Javascript中声明静态变量[重复]

    这个问题在这里已经有答案了 在下面的代码中 我希望有一个计数器来跟踪创建的 Person 对象的数量 这段代码没有这样做 我该如何实现呢 function Person this name Peter this counter this c
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • 扩展 Codeigniter Exceptions 类以添加自定义方法

    我创建了一个新方法来处理 401 apache 错误 我的核心类扩展了 CI 核心类 但是当我调用方法名称时 我收到此消息 致命错误 调用未定义的函数show 401 in G Path application controllers lo
  • 将 javascript 放在 header 之外有多糟糕?

    这个问题几乎已经说明了一切 我开始添加一些功能到我的周末项目 http www my clock net 对于我和几个朋友来说 这是一个小应用程序 因为我们是交换生 所以它对我们来说有点有用 但事情是这样的 我在 php 中执行此操作并使用
  • jQuery 中如何判断 JSON 对象是否为空

    我有以下 JSON meta limit 20 next null offset 0 previous null total count 0 objects 我对对象感兴趣 我想知道对象是否为空并显示警报 像这样的东西 success fu
  • 使用 Javascript 对象模型在 SharePoint 任务上设置“分配给”

    我想创建一个共享点任务并将其分配给我自己 当前用户 在 javascript 对象模型中 我有下面的代码 但我认为我需要设置 spusercollection 对象 而不是设置特定用户 但是 我似乎无法在任何地方找到如何执行此操作的任何示例
  • 如何垂直打印数组中的字符串元素? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我有一个数组 我想垂直打印每个元素 例如 myArr abc def ghi 输出应该是 a d g b e h c f
  • jQuery 时间戳之前的时间?

    下面是一个非常好的 jQuery 插件 与他们在 SO 上使用的插件非常相似 对我来说问题是它用它来转换时间
  • 搜索多个表 (SQL)

    我需要能够有一个 SQL 查询来使用简单的搜索来搜索我的数据库 这是我的表格现在的样子 Table artists id name Table albums id artistID name Table songs id albumID n
  • 无法使用 PHP mail() 发送电子邮件。您的服务器可能未配置为使用此方法发送邮件

    我尝试使用 codeigniter 框架发送邮件 但它会引发错误 无法使用 PHP mail 发送电子邮件 您的服务器可能未配置为使用此方法发送邮件 From prakash t lt email protected cdn cgi l e
  • 错误:SQLSTATE[HY000] [2002] 无法建立连接,因为目标计算机主动拒绝连接

    当我调试代码时突然发生错误 它有一系列关于数据库连接的错误 ERROR SQLSTATE HY000 2002 No connection could be made because the target machine actively
  • 如何使用 JavaScript 播放任意 MIDI 音符?

    澄清一下 我不想生成 MIDI 文件 也不想播放 MIDI 文件 我希望即时播放 MIDI 音符 我尝试使用https github com mudcube MIDI js https github com mudcube MIDI js作
  • Laravel 中的 SQL 运算符是什么?

    我正在查看 Laravel 的源代码 发现了很多 Eloquent 的 SQL 运算符 我想知道其中一些是什么以及如何使用它们 不幸的是我没有找到任何文档 这是我找到的运营商vendor laravel framework src Illu
  • 使用 google 检查 url,安全 = 活动

    如何检查 url 是否被 google 显示 Example https www google com search q redtubex xxx safe active Code input http www example com in
  • 删除 cookie php

    我正在尝试创建一个带有登录系统的平台 并将用户名和密码存储在cookie中 以使用户即使关闭浏览器然后再次输入也能保持登录状态 我设法保存了cookie 但我不知道如何制作注销按钮 这是代码 function logout body app
  • 如何检查文件是否为php?

    我想检查文件是否具有扩展名 php 如果有的话我会把它包括在内 有人可以帮我进行正则表达式检查吗 thanks 通常您不使用正则表达式 以下是一种流行的方法 extension pathinfo filename PATHINFO EXTE
  • 按钮导致页面重新加载

    我在我的页面上使用 html 和 jquery 在我的 html 中 我有一个按钮 单击该按钮将触发一个功能 当页面加载时 我调用文档准备中的主函数 这是我的代码 div div
  • 加载 angularjs 路由后运行 javascript 代码

    我需要在 angularjs 加载路线后显示警报 显示警报的代码位于 angularjs 异步加载的视图中 视图加载后 我希望它能够运行 但它没有 我知道我可以广播并告诉它稍后运行等 但我需要一个更通用的解决方案 假设您正在谈论基于以下内容
  • 使用 Three.js 中的设备方向控件进行对象旋转

    我正在迈出使用 JavaScript 进行编码并使用 Three js 的第一步 我正在尝试 Threejs org 的这个例子 http trijs org examples misc controls deviceorientation
  • 调试客户端时使用 Chrome/Firefox

    我正在使用带有 getUserMedia 的相机 但出现了一些需要修复的错误 问题是 Visual Studio 只允许我使用 IE 调试 JavaScript 我的意思是命中断点 而 IE 不支持 getUserMedia 如果您想在 I

随机推荐

  • Android 旋转箭头始终位于其他视图上方

    在我的应用程序中 我的滚动视图中有一些旋转器 每个旋转器都是片段的一部分 该滚动视图放置在文本视图下方 问题是 当我在测试设备 Samsung Galaxy S6 Edge G925F API 23 上运行应用程序时 微调器的小箭头在 te
  • 我的 debounce axios 请求的实现使承诺永远处于挂起状态,有更好的方法吗?

    我需要一个简单的去抖函数 并且立即始终为真 无需求助于 lodash 并在以下的帮助下有人可以解释一下 Javascript 中的 debounce 功能吗 我实现如下 function debounce func wait var tim
  • MongoDB 查找今天的记录[重复]

    这个问题在这里已经有答案了 在 Mongo shell 中 如何过滤今天 或特定日期 添加的记录 我没有新记录的时间戳的特定字段 但我猜它可以从ObjectID恢复 我们可以用 where db collection find where
  • 如何使用 jQuery 更改元素的标题属性

    我有一个表单输入元素 想要更改其标题属性 这必须很简单 但由于某种原因我找不到如何做到这一点 这是如何完成的 我应该在哪里以及如何搜索如何做到这一点 在编写任何代码之前 让我们讨论一下属性和属性之间的区别 属性是应用于元素的设置HTML 标
  • 在 Three.js 中根据对象的旋转来移动对象

    我正在尝试根据其旋转在 Three js 中移动立方体 但不确定如何进行 到目前为止 我可以使用 A 和 D 键来旋转立方体的 z 轴 使用 W 键我希望它相对于其旋转向前移动 从 2D 来看 我会这样 float angle GradTo
  • iOS 11 使用大标题时滚动到顶部无法正常工作

    使用大标题并点击状态栏滚动到标题顶部时UIScrollView or UITableView 可能也UICollectionView 还没有测试过这个 它总是有点太过分了 我已启用刷新TableView当点击状态栏时 它会显示为这样 并保持
  • 和 <%@ include file=...> 有什么区别? [复制]

    这个问题在这里已经有答案了 这两个标签都包含一个页面中另一页面的内容 那么什么是精确差异在这两个标签之间 在一段可重用的代码中 我使用指示 在第二个我使用标准动作
  • React,如何从父级访问子级的状态?无需更新父级的状态

    大家好 我对 React 还很陌生 并且很难理解整个状态管理以及通过状态和 props 传递数据 我确实理解标准的反应方式是以单向方式传递数据 从父级到子级 我已经对所有其他组件这样做了 但我有一个名为 Book 的组件 它根据用户选择形式
  • “any”类型的参数不可分配给“never”类型

    我正在从端点获取图像 但无法将每个映射文件推送到本地数组中 我收到错误Argument of type any is not assignable to type never 我尝试将所有参数设置为blob没有成功 尝试设置function
  • HTML 表格中的自动换行

    我一直在使用word wrap break word将文本换行divs and spans 但是 它似乎不适用于表格单元格 我有一张桌子width 100 一行两列 列中的文本 尽管样式与上述相同word wrap 不换行 它会导致文本超出
  • ScrollViewer 使用 DataGrid 时性能缓慢

    我有以下场景
  • iOS 5.0 中的 Core Image 滤镜对于实时视频处理来说足够快吗?

    现在 Apple 已将 Core Image 框架移植到 iOS 5 0 我想知道 Core Image 是否足够快 可以将实时滤镜和效果应用于相机视频 另外 学习 iOS 5 0 的 Core Image 框架的一个好的起点是什么 现在
  • 属性与函数(特别是.NET)

    我读过一些关于这个主题的讨论 但有一些我不明白的地方 最常见的答案似乎是这样的 使用 ReadOnly 属性返回缓存数据 使用 Function 返回非缓存数据 根本不要使用 WriteOnly 属性 因为 它没有意义 这没有性能原因 在伊
  • PHP 为每个页面添加导航栏技术?

    我正在尝试通过包含文件来合并每个页面的代码来清理我的 php 网页中的代码 如下所示 文件 head php 文件 页脚 php
  • 节点js SMTP错误

    我正在通过我的 godaddy 电子邮件帐户发送电子邮件 为此 我使用 Node js 发送电子邮件 但它给出以下错误 Error getaddrinfo ENOTFOUND code ENOTFOUND errno ENOTFOUND s
  • 如何使用节标题调整 UITableViewController 中 UITableView 的大小

    我在 UITableViewController 中有一个分组的 UITableView 我想水平调整它的大小 我尝试了很多不同的方法 但没有一个是完美的 我尝试过的 1 覆盖 UITableView setFrame 但它没有移动各部分的
  • 保持数据库连接打开的成本是否昂贵?

    我正在与一些软件开发人员开会 他们建议我在我的应用程序代码中尽快关闭数据库连接 有人可以告诉我在应用程序中保持连接打开有什么危害吗 我正在从数据库的单个表中读取数据 把它想象成公共汽车上的座位 当您打开连接时 您会填满这些座位 最终 公共汽
  • 如何在 Google App Engine 启动器启动时禁用自动检查更新?

    我一直在研究 GAE 并且喜欢 Windows SDK 提供的 GAE 启动器的易用性 我的问题是 当我启动应用程序时 它需要很长时间才能响应 这是因为程序在启动应用程序之前首先检查更新 这会导致它在等待响应时挂起 我的问题是我的主要开发计
  • Java - SimpleDateFormat 解析 12:19:00 到 00:19:00

    我正在尝试解析迄今为止的字符串 但输出看起来不正确 下面是我的代码 public static void main String args Date startDate new Date DateFormat formatter new S
  • 如何从 base64 数据 URI 在服务器端保存 PNG 图像

    我正在使用 Nihilogic 的 Canvas2Image JavaScript 工具将画布绘图转换为 PNG 图像 我现在需要的是使用 PHP 将此工具生成的这些 base64 字符串转换为服务器上的实际 PNG 文件 简而言之 我目前