如何保存以Data-URI编码的图像？ [英] How to save a image coded in Data-URI?
本文介绍了如何保存以Data-URI编码的图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试找到一个技巧来保存以Data-URI编码的图片，如下所示：
I'm trying to find a trick to save a picture coded in Data-URI like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1MAAAE7CAYAAAA4gNuCAAAgAElEQ…
i/fPjJwSa8k8blB7TPIbffod14w9E/Baq03hUCXPf2/wK6K8SbNo44VwAAAABJRU5ErkJggg==
另一个问题：第一次在服务器中保存图片的位置？浏览器？
Another question: Where the picture is saved in the first time in the server? Browser?
推荐答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function () {
var img = document.getElementById('embedImage');
var button = document.getElementById('saveImage');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
'9TXL0Y4OHwAAAABJRU5ErkJggg==';
img.onload = function () {
button.removeAttribute('disabled');
};
button.onclick = function () {
window.location.href = img.src.replace('image/png', 'image/octet-stream');
};
};
</script>
</head>
<body>
<img id="embedImage" alt="Red dot"/>
<input id="saveImage" type="button" value="save image" disabled="disabled"/>
</body>
</html>
PHP： http://j-query.blogspot.com/2011/02/save-base64-encoded-canvas-image -to-png.html
<?php
// requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;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.';
?>
编辑JS解决方案2（小提琴： http://jsfiddle.net/KAdN8/ ）：
EDIT JS solution 2 (fiddle: http://jsfiddle.net/KAdN8/):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
var img = document.getElementById('embedImage');
if( document.createEvent ) {
var evObj = document.createEvent('MouseEvents');
evObj.initEvent( 'click', true, false );
img.dispatchEvent(evObj);
} else if( document.createEventObject ) {
img.fireEvent('on'+evt);
}
</script>
</head>
<body>
<a href="data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" download="image.png" id="embedImage">Download</a>
</body>
</html>
这篇关于如何保存以Data-URI编码的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
