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

发布于07月17日

我正在使用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
    }
});

在这一点上，"idden.php"接收到一个看起来像data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABE...%的数据挡路

从现在起，我几乎被难住了.从我所读到的内容来看，我相信我应该使用PHP的imagecreatefromstring函数，但我不确定如何从base64编码的字符串中创建一个实际的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);

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);

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

推荐答案

Javascript相关问答推荐

Webpack将懒惰加载的模块放入主块中

响应式JS DataTable中的Bootstrap 5弹出程序无法正常工作

如何在alpinejs中显示dev中x-for的元素

在JavaScript中打开和关闭弹出窗口

为什么在集内和集外会产生不同的promise 状态(使用Promise.race)？

为什么在获取回调内设置状态(不会)会导致无限循环？

vanillajs-datepicker未设置输入值，日期单击时未触发更改事件

React存档iframe点击行为

Vue：ref不会创建react 性属性

我试图实现用户验证的reduxstore 和操作中出了什么问题？

每次子路由重定向都会调用父加载器函数

提交表格后保留Web表格中的收件箱值？

将状态向下传递给映射的子元素

将现场录音发送到后端

如何使用JavaScript拆分带空格的单词

对路由DOM嵌套路由作出react

使用Nuxt Apollo在Piniastore 中获取产品细节

ngOnChanges仅在第二次调用时才触发

Reaction即使在重新呈现后也会在方法内部保留局部值

重新呈现-react -筛选数据过多