如何从 dataurl 在服务器上创建图像文件答案

【问题标题】：how to create an image file on server from dataurl如何从 dataurl 在服务器上创建图像文件
【发布时间】：2013-03-28 05:47:58
【问题描述】：

我有一张 dataurl 格式的图片，例如：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…iiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==

我需要将 JavaScript 中的这个字符串转换成另一个可以直接复制到空白 jpg 文件的字符串，以便用户查看。
知道如何实现这一目标吗？

【问题讨论】：

你需要显示它还是创建一个文件？
创建一个文件。 @jclandero23
this thread 你想做什么？
不，我现在编辑问题以便更清楚

标签： javascript image data-url

【解决方案1】：

您只需从 DataURI 中删除“data:image/jpeg;base64”。

$dataUri = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgM...";
// remove "data:image/jpeg;base64," from image Data URI.
$data = str_replace("data:image/jpeg;base64,", "", $dataUri);

// save to file
file_put_contents("/tmp/image.jpeg", base64_decode($data));

【讨论】：

file_put_contents 并不是真正有用的伪代码。问题是如何创建图像文件，而不是如何准备数据以供以后在图像文件中使用。

【解决方案2】：

如果您希望用户能够下载文件并将其保存在计算机上的某个位置，请尝试以下操作：

document.location.href = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB…";

如果您正在尝试这样做，请参阅Download data url file。

【讨论】：

我不想下载。

【解决方案3】：

要显示它，您可以使用 src 属性：

<img src="data:image/png;base64,R0lGODlhUAAPAKIAAA+g4JADs=" width="80" height="80" />

要生成文件，您需要使用 canvas 元素：

例子：

<html>
    <head></head>
    <body>
        <canvas id="c"></canvas>
        <script type="text/javascript" src="canvas2image.js"></script>
        <script type="text/javascript" src="baseg4.js"></script>
        <script type="text/javascript">

            var canvas = document.getElementById("c");
            var ctx = canvas.getContext("2d");

            var image = new Image();
            image.src = "data:image/png;base64,iVBORw0KG............5CYII%3D";
            image.onload = function()
            {
               ctx.drawImage(image, 0, 0);
                var foo = Canvas2Image.saveAsPNG(canvas);  
            };
            var img = canvas.toDataURL("image/png");
        </script>
    </body>
</html>

并保存图像和内容...您可以在此链接中找到将画布转换为文件的方法：

//http://www.nihilogic.dk/labs/canvas2image/

编辑：我猜是新链接... https://github.com/hongru/canvas2image

【讨论】：

ctx.drawImage(data, 0, 0)存在typeError；
我对帖子进行了一些编辑！现在试试！ =D 现在为我工作！ =)
canvas2image 链接好像坏了。

【解决方案4】：

您必须从dataURI 中删除data:image/jpeg;base64, 并解码dataURI：

public void saveImage(String imageURI) {
    BufferedImage image = null;
    String blobString=imageString.replace("data:image/jpeg;base64,", "");
    byte[] byteArray = Base64.getDecoder().decode(blobString);
    ByteArrayInputStream bis = new ByteArrayInputStream(byteArray);
    try {
        image = ImageIO.read(bis);
        File file = new File("/home/rakesh/Vinay/a.jpeg");
        ImageIO.write(image, "jpeg", file);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

【讨论】：