javascript 如何从dataurl在服务器上创建图像文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15675063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create an image file on server from dataurl
提问by Leslie Wu
I have an image in a dataurl format, like:
我有一个 dataurl 格式的图像，例如：
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…iiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==
I need to convert this string in JavaScript to another string which can be directly copied to a blank jpg file so that it can be viewed by the user.
Any idea how to achieve this?
我需要在 JavaScript 中将这个字符串转换为另一个可以直接复制到空白 jpg 文件的字符串，以便用户查看。
知道如何实现这一目标吗？
回答by Sibin John Mattappallil
You just need to remove "data:image/jpeg;base64," from DataURI.
您只需要从 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));
回答by Superlandero
To display it you can use the src attribute:
要显示它，您可以使用 src 属性：
<img src="data:image/png;base64,R0lGODlhUAAPAKIAAA+g4JADs=" width="80" height="80" />
To generate a file you need use canvas element:
要生成文件，您需要使用 canvas 元素：
Example:
例子：
<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>
And save the image and stuff... you can find a way to convert the canvas to a file in this link:
并保存图像和内容...您可以在此链接中找到一种将画布转换为文件的方法：
// http://www.nihilogic.dk/labs/canvas2image/
// http://www.nihilogic.dk/labs/canvas2image/
EDIT: New link, I guess... https://github.com/hongru/canvas2image
编辑：新链接，我猜... https://github.com/hongru/canvas2image
回答by Trevor Dixon
If you want the user to be be able to download the file and save it somewhere on their computer, try this:
如果您希望用户能够下载文件并将其保存在计算机上的某个位置，请尝试以下操作：
document.location.href = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB…";
See Download data url fileif this is what you're trying to do.
如果这是您要执行的操作，请参阅下载数据 url 文件。
回答by Vinay Revar
You have to remove data:image/jpeg;base64,from the dataURIand decode the dataURI:
你必须删除data:image/jpeg;base64,从dataURI和解码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();
}
}
