时间戳

首页 > 解决方案 > 将元素内容保存到jpg文件的简单方法？

javascript - 将元素内容保存到jpg文件的简单方法？

问题描述

这似乎应该非常简单，但我已经搜索了大约 3 个小时。我想做一些非常简单的事情。我有一个<img>html 元素，它以仅临时存储的 base64 图像的形式获取一些数据。我想要做的就是在单击某个按钮时拍摄该图像并将其保存为 jpeg。而已。

所以一些简单的事情（当然是伪代码）：

x = document.getElementByID("myImgTagID").image.saveToFile(myPath)

我尝试了 50 种不同的东西，从 jquery 到 php 处理表单 POST。我想要的只是一些简单明了的东西，它获取图像的内容，即 image.value 并将其写入 jpeg 或 png。

问题是我不够聪明，即使我觉得我已经接近了几次。帮助！

标签： javascript

解决方案

好的，所以我设法解决了。在这里使用几个答案的片段，我还在另一个网站上找到了一篇非常有用的文章。不确定我是否可以链接到它（如果不允许，模组可以随意删除）：

如何保存base64

无论如何，我能够让它保持超级简单，而不必转换为八位字节或类似的东西。只需使用一个变量来保存 base64 数据，将其转换为 ajax 数据对象，并将其发布到 php 处理程序。下面的代码，对于任何需要这样的解决方案的人：

首先通过按钮单击调用的 js 函数：

function saveThisImage() {
var image = avatar.src;
$.ajax({
  url:"../../saveImg.php",
  data:{ base64: image },
  type:"post",
  complete:function(){
    console.log("Ready");
  } }); }

和 php 处理程序：

$baseFromJavascript = "data:image/png;".$_POST['base64'].",BBBFBfj42Pj4"; 
$base_to_php = explode(',', $baseFromJavascript);
$data = base64_decode($base_to_php[1]);
$filepath = "image99.png"; 
file_put_contents($filepath,$data);

其中“image99.png”只是一个占位符，直到我创建一个脚本来为它们生成唯一的文件名。但这就是让它工作的全部。

感谢所有的帮助家伙，你指出了我正确的方向

推荐阅读