Question

我正在建立一个小网站，用户可以在其中粘贴图像。我想获取该粘贴图像的链接。我现在得到的是：

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

还有50万个字符。

这也是我使用的代码，也获得了粘贴的图像：

  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);
  }
    }

然后我使用<div class="absoluteText square"> <img id="pastedImage"/> </div>

显示它

我希望能够以某种方式轻松引用此图像。例如，在另一个选项卡中打开。那么我将如何获得到该图像的正常链接，最好是用户端？

Answer 1

将文件转换为Blob网址。下面的代码会将所有多个文件放入数组，并可以存储在后端。

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); 
    }

下面的代码将获取文件名（php）

foreach($filesArray as $key => $value){
   $data = explode(',',$value);
   $typeFile = explode('/', $data[0]);
   $extension = explode(';', $typeFile[1]);
   $fileName = base64_decode($data[1]);
}

将文件名保存在数据库中

如何获得用户提供的图像的链接？

1 个答案: