[英]How do I get the link of the user-provided image?
I'm building a little website where users will be able to paste images into it. 我正在建立一个小网站,用户可以在其中粘贴图像。 I want to get the link for that pasted image.
我想获取该粘贴图像的链接。 What I get right now is:
我现在得到的是:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZYAAAFWCAYAAABKELsiAAAgAElEQVR4ASy9Wa9s2ZWd9612N9Gc22RHMkmxiupgC4YEw/Cbf1v+NT/6xZBfLFl2SSVWsVhkMvPee05E7L1Xa4wVBFEokJnnnIjYa8055mhmmK+u33Zr4O1oRHOm9AQuYbunUfC9YhxM2ZJWTzoqtkEMjsM2TOvYOtFdw/ZKKLBNFVcM3nQOAj0V3NyJNrIlQyCRGywBggk8cqYYaA1mA2lt2DdH9J6Hz7yznkfNVP3OBkdzhLlg9oi1CeMdbVnp951mEr4vmFbYW8H4wBwyuYMxE9Sd2B3r+ktKO5GOvyf5ii+VDUcPDkcmZDg8UCx2mnD3B61ZStB7N+QWiK3iq8F4DxOUW8Jbi2kH9Au73SmT/rcVsxt4yeQvgWAOfPHMwKvN0AOzTSS9dzqhB5ZSuftANRHfb7ipEXqnVI/LluwMtmZKmDF1o0Q42c4jRUyrxLUz3658aQdz6OwhY7PBlkq3Dmc6vYOzltQbk4XKCec3bO8cdSGag1gMX1wj+kIogdYMR4S5dO7d4TvjzHQ9Tw95hnxYvDO4pL9jaL7jYsJujsNlooV7DYTmaDFjDgMebJyo3HGHJWc9/4XODaO/GyrFdjhOxNNG3wzdF3I6EWzFU8muY2rH4rCxQS8cy8SSCzYH7j0Rq6f3RDtZ+qvFhko3FuMMIXscjeQcNRyEGtkyOA6IntImZvtGygE/d0wy1J7pNTJ5B06ffycshb7pvOlvdfxy5X/+n/4dv/3+a/72b678X//7f+S/f/7MP//zF77Uxl5urLpDOdFdJvWANQ3XI6FWtrWM11luAe87tlUyHtcAnQFj+WqZ+d3X/xY/X/g//9v/gTGWrerzf6N5nYkDYz1m7/To6RUmr9du2Fok+ANXOo1IobNU6C+FvluyLcR0ofKgVEv3FQf0U6DdDmK3mLmT24Sn03qllUacLZu3uDfVAqAlpuXMY7+NM3lzJ+ZUebTE3Gaq/g6dzVmm1jnGuQOfHbkndhfxMbLuO4/WmJ3HVEefCrka3AxBv6FCbgnXT/zu4zd82V552z/x8ND1n3vHxojpmdpPhL6D7qGvUD0PA7YZYoKytvF+MA1untlZjM48AefSeMahJG7mSih3j
And like 500 000 more characters. 还有50万个字符。
This is the code I'm using too get the pasted image: 这也是我使用的代码,也获得了粘贴的图像:
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
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
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;
console.log(event.target.result);
alert(event.target.result);
};
reader.readAsDataURL(blob);
}
}
Then i display it using <div class="absoluteText square"> <img id="pastedImage"/> </div>
然后我使用
<div class="absoluteText square"> <img id="pastedImage"/> </div>
I want to be able to easily refer to this image somehow. 我希望能够以某种方式轻松引用此图像。 For example open in in another tab.
例如,在另一个选项卡中打开。 So how would I go about getting a normal link to that image, preferably user-side?
那么我将如何获得到该图像的正常链接,最好是用户端?
convert file to blob url. 将文件转换为Blob网址。 Below code will get all multiple files into array and can be stored in the backend.
下面的代码会将所有多个文件放入数组,并可以存储在后端。
var filesArray = new Array();
var file = document.getElementById('XYZ').files[0];
if(file){
var reader = new FileReader();
reader.onloadend = function(e) {
filesArray.push(e.target.result);
};
reader.readAsDataURL(file);
}
Below code will fetch the filename (php) 下面的代码将获取文件名(php)
foreach($filesArray as $key => $value){
$data = explode(',',$value);
$typeFile = explode('/', $data[0]);
$extension = explode(';', $typeFile[1]);
$fileName = base64_decode($data[1]);
}
Save the filename in the database 将文件名保存在数据库中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.