[英]How to save onpaste image with a src of “data:image/png;base64,…” using php
我正在尝试将粘贴的图像保存到文件夹中,并将相关的详细信息保存到数据库中,但是我当前的代码不是保存粘贴的图像,而是尝试将硬编码的url放在src属性上,并且它可以正常工作。
我检查了粘贴图像的src元素,它非常长,例如“ data:image / png; base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAC4CAYAAAAvx2MfAAAgAElEQVR4Ae2dCXwW1dX ...”,它的长度比此更长,但用于示例目的。 如何使用该图像地址保存图像? 请帮忙。
这是HTML:
<div class="col-lg-6">
<div class="form-group col-lg-12">
<input class="form-control" id="pasteArea" placeholder="Paste image here..."></input>
<img name="map-sketch" id="pastedImage" width="100%" height="100%" src='images/sample.png'></img>
</div>
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-primary" onclick="save()">Save</button>
</div>
<div class="col-lg-2" id="saving-info"></div>
上图的src是一个硬编码的url。
这是我正在使用的javascript onpaste:
document.getElementById('pasteArea').onpaste = function (event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
document.getElementById("pastedImage").src = event.target.result;
};
reader.readAsDataURL(blob);
}
}
这是AJAX代码:
function save(){
var params = 'kind=land';
var image = document.getElementById("pastedImage").getAttribute("src");
params += '&image='+image;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("saving-info").innerHTML = xmlhttp.responseText;
}else { // waiting for result
document.getElementById('saving-info').innerHTML = '<img src="../images/ajax_loader.gif">';
}
}
xmlhttp.open("POST", "../functions/save-faas.php", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(params);
}
这是用于保存图像的PHP代码:
<?php
$url = $image;
$img = '../images/1.png';
file_put_contents($img,file_get_contents($url));
?>
此处的代码适用于硬编码的URL,但不适用于粘贴的图像。
我该怎么办? 谢谢。
在此pasteArea
id上使用onchange怎么样?
$("#pasteArea").onchange(function(){
//do something
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.