javascript - 如何内联IMG SRC数据:image Be Transferred With JavaScript to PHP?

标签 javascript php jquery image html5-canvas

下面是一个包含内联 Base64 图像数据(缩写以适应此处)的元素。 JavaScript 如何获取内联数据并将其发送给 PHP?如果可以避免中间 Canvas 就好了,因为原始数据已经可用。

在页面中:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU4Xoy9WY9k6" id="photo">

我当前用来单击元素以触发到 PHP 的传输的 JavaScript,它将 0 字节 .png 文件保存到磁盘:

$("#photo").click(function() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'uploadPhoto.php', true);
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  var data = 'image=' + this.src;
  xhr.send(data);
});

uploadPhoto.php,接收数据并将其写入磁盘:

<?php
  if ($_POST) {
    define('UPLOAD_DIR', '/photos/');
    $img = $_POST['image'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
  } else {
    print 'Unable to save ' . $_POST['image'];
  }
?>

缺少什么?

解决方案更新

根据@EhsanT,原始数据的 png 格式在 php 中不匹配,因此 php 中的这一行现在有 png,而 jpeg 曾经是:

str_replace('data:image/png;base64,', '', $img);

最佳答案

在您提供的这个特定示例代码中,您做错的唯一一件事是您有一个 PNG base64 图像数据,并且在您的 uploadPhoto.php 文件中需要一个 JPG 文件。

因此,在 uploadPhoto.php 文件中只需更改这一行:

$img = str_replace('data:image/jpeg;base64,', '', $img);

对此:

$img = str_replace('data:image/png;base64,', '', $img);

一切顺利

关于javascript - 如何内联IMG SRC数据:image Be Transferred With JavaScript to PHP?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30158640/

相关文章:

Javascript:将数据从 Firebase DB 加载到生成的输入字段中

更换服务器后PHP文件无法访问MySQL数据库

javascript - 我的代码容易受到 XSS 攻击吗?

javascript - Klipfolio 数据与 Highchart Javascript 集成

javascript - 在 nodejs 中追加列出 ajax 结果

javascript - 多个状态按钮 - 背景颜色

php - Twitter 正则表达式只有在还没有链接时

php - 如何访问另一个页面上另一个类中的mysqli连接?

javascript - 如何删除用户添加的第二个哈希?

javascript - jQuery.filter() : exit before the end