php复制粘贴截图并显示,ajax上传

古城微笑少年丶 2021-09-27 08:54 270阅读 0赞

案例一.

原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传

<?php header("Access-Control-Allow-Origin:*"); $url = 'http://'.$_SERVER['HTTP_HOST']; $file = (isset($_POST["file"])) ? $_POST["file"] : ''; if($file) { $data = base64_decode(str_replace('data:image/png;base64,', '', $file)); //截图得到的只能是png格式图片，所以只要处理png就行了 $name = md5(time()) . '.png'; // 这里把文件名做了md5处理 file_put_contents($name, $data); echo"$url/$name"; die; } ?>
    
    
    <div id="box"style="width:400px;height:400px;border:1px solid;"contenteditable>
    </div>
    <input type="hidden"name="img"value=""id="img_puth"/>
    
    <script> //查找box元素,检测当粘贴时候, document.querySelector('#box').addEventListener('paste', function(e) { //判断是否是粘贴图片 if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) { var that = this, reader = new FileReader(); file = e.clipboardData.items[0].getAsFile(); //ajax上传图片 reader.onload = function(e) { var xhr = new XMLHttpRequest(), fd = new FormData(); xhr.open('POST', '', true); xhr.onload = function () { var img = new Image(); img.src = xhr.responseText; // that.innerHTML = '<img src="'+img.src+'"alt=""/>'; document.getElementById("img_puth").value = img.src; } // this.result得到图片的base64 (可以用作即时显示) fd.append('file', this.result); that.innerHTML = '<img src="'+this.result+'"alt=""/>'; xhr.send(fd); } reader.readAsDataURL(file); } }, false); </script>

转自[http://www.php.cn/js-tutorial-382323.html][http_www.php.cn_js-tutorial-382323.html]

案例2.  
最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴)

案例3

// 处理粘贴事件
      $("#aaa").on('paste', function(eventObj) { 
       // 处理粘贴事件
       var event = eventObj.originalEvent;
       var imageRe = new RegExp(/image\/.*/);
       var fileList = $.map(event.clipboardData.items, function (o) { 
        if(!imageRe.test(o.type)){ return }
        var blob = o.getAsFile();
        return blob;
       });
       if(fileList.length <= 0){ return }
       upload(fileList);
       //阻止默认行为即不让剪贴板内容在p中显示出来
       event.preventDefault();
      });
      function upload(fileList) { 
       for(var i = 0, l = fileList.length; i < l; i++){
        var fd = new FormData();
        var f = fileList[i];
        fd.append('files', f);
        var editor=document.getElementById("aaa");
        $.ajax({
         url:"/upload_editor_photo3",
         type: 'POST',
         dataType: 'json',
         data: fd,
         processData: false,
         contentType: false,
         xhrFields: { withCredentials: true },
         headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Credentials': 'true'
         },
         success: function(res){ 
          var len=res.data.length;
          for ( var i = 0; i < len; i ++) {
           var img = document.createElement('img');
           img.src = res.data[i]; //设置上传完图片之后展示的图片
           editor.appendChild(img);
          }
         },
         error: function(){ 
          alert("上传图片错误");
         }
        });
       }
      }

注意:因为只支持右键复制图片,所以并不能一下复制两张图片,所有图片复制并粘贴上传待研究.

//接口返回数据格式:
    
    {
     // errno 即错误代码，0 表示没有错误。
     // 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
     errno: 0,
    
     // data 是一个数组，返回若干图片的线上地址
     data: [
      '图片1地址',
      '图片2地址',
      '……'
     ] }

相关文章[http://www.php.cn/js-tutorial-382323.html][http_www.php.cn_js-tutorial-382323.html]

![这里写图片描述][70]

[http_www.php.cn_js-tutorial-382323.html]: http://www.php.cn/js-tutorial-382323.html
[70]: /images/20210923/fa41038e199944bfbec6bc607658008a.png