html2canvas का उपयोग कर स्क्रीनशॉट कैसे अपलोड करें?

Question

html2canvas का उपयोग करके मैं किसी ऑब्जेक्ट पर स्क्रीन शॉट कैसे सहेज सकता हूं? मैं क़ौम की खोज किया गया है, और देखो समारोह उत्पन्न करने के लिए है कि स्क्रीनशॉट इस प्रकार उत्पन्न होता है:

$(window).ready(function() { 
    ('body').html2canvas();  
}); 

क्या मैं कर की कोशिश की है

$(window).ready(function() { 
    canvasRecord = $('body').html2canvas(); 
    dataURL = canvasRecord.toDataURL("image/png"); 
    dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
    upload(dataURL); 

}); 

है और, मैं तो यह करने के लिए पारित मेरा upload() फ़ंक्शन। मेरी समस्या यह है कि, मैं यह नहीं समझ सकता कि html2canvas() लाइब्रेरी में स्क्रीनशॉट कहां बनाया जा रहा है या यह फ़ंक्शन इसे वापस देता है। मैंने एसओ से this उत्तर का उपयोग कर कैनवास ऑब्जेक्ट को परिवर्तित करने का प्रयास किया है (हालांकि मुझे यकीन नहीं है कि मुझे ऐसा करने की ज़रूरत है)।

---

मैं सिर्फ कैसे imgur लिए एक फ़ाइल अपलोड करने के लिए पर एक question पूछा, और वहाँ जवाब (विशेष रूप से bebraw के @) मेरी मदद को समझने के लिए मैं क्या करने की जरूरत।

upload() समारोह Imgur उदाहरण API सहायता से है:

function upload(file) { 
    // file is from a <input> tag or from Drag'n Drop 
    // Is the file an image? 
    if (!file || !file.type.match(/image.*/)) return; 

    // It is! 
    // Let's build a FormData object 
    var fd = new FormData(); 
    fd.append("image", file); // Append the file 
    fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/ 

    // Create the XHR (Cross-Domain XHR FTW!!!) 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom! 
    xhr.onload = function() { 
     // Big win! 
     // The URL of the image is: 
     JSON.parse(xhr.responseText).upload.links.imgur_page; 
    } 

    // Ok, I don't handle the errors. An exercice for the reader. 
    // And now, we send the formdata 
    xhr.send(fd); 
} 

Answer 1

मैं संशोधित और this answer से विधि टिप्पणी किए गए। यह <canvas> तत्व से बना एक दिए गए नाम के साथ केवल एक फ़ाइल भेजता है।

if (!('sendAsBinary' in XMLHttpRequest.prototype)) { 
    XMLHttpRequest.prototype.sendAsBinary = function(string) { 
    var bytes = Array.prototype.map.call(string, function(c) { 
     return c.charCodeAt(0) & 0xff; 
    }); 
    this.send(new Uint8Array(bytes).buffer); 
    }; 
} 

/* 
* @description  Uploads a file via multipart/form-data, via a Canvas elt 
* @param url String: Url to post the data 
* @param name String: name of form element 
* @param fn String: Name of file 
* @param canvas HTMLCanvasElement: The canvas element. 
* @param type String: Content-Type, eg image/png 
***/ 
function postCanvasToURL(url, name, fn, canvas, type) { 
    var data = canvas.toDataURL(type); 
    data = data.replace('data:' + type + ';base64,', ''); 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', url, true); 
    var boundary = 'ohaiimaboundary'; 
    xhr.setRequestHeader(
    'Content-Type', 'multipart/form-data; boundary=' + boundary); 
    xhr.sendAsBinary([ 
    '--' + boundary, 
    'Content-Disposition: form-data; name="' + name + '"; filename="' + fn + '"', 
    'Content-Type: ' + type, 
    '', 
    atob(data), 
    '--' + boundary + '--' 
    ].join('\r\n')); 
} 

Answer 2

यह कोड मेरे लिए काम करता है। यह html2canvas द्वारा स्क्रीनशॉट उत्पन्न करेगा, एपीआई imgur करने के लिए स्क्रीनशॉट अपलोड करें, और imgur यूआरएल वापस।

<button class="upload" >Upload to Imgur</button> 
<script> 
$(".upload").on("click", function(event) { 
    html2canvas($('body'), { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 
     try { 
     var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1]; 
    } catch(e) { 
     var img = canvas.toDataURL().split(',')[1]; 
    } 
    // open the popup in the click handler so it will not be blocked 
    var w = window.open(); 
    w.document.write('Uploading...'); 
    // upload to imgur using jquery/CORS 
    // https://developer.mozilla.org/En/HTTP_access_control 
    $.ajax({ 
     url: 'http://api.imgur.com/2/upload.json', 
     type: 'POST', 
     data: { 
      type: 'base64', 
      // get your key here, quick and fast http://imgur.com/register/api_anon 
      key: 'your api key', 
      name: 'neon.jpg', 
      title: 'test title', 
      caption: 'test caption', 
      image: img 
     }, 
     dataType: 'json' 
    }).success(function(data) { 
     w.location.href = data['upload']['links']['imgur_page']; 
    }).error(function() { 
     alert('Could not reach api.imgur.com. Sorry :('); 
     w.close(); 
    }); 
    }, 
    }); 
    }); 
</script> 

Answer 3

//Here I am using html2Canvas to capture screen and Java websockets to transfer data to server 
//Limitation:Supported on latest browsers and Tomcat 
Step1)Client Side : webSock.html 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<!-- Arun HTML File -->> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Tomcat web socket</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="html2canvas.js?rev032"></script> 
<script type="text/javascript"> 
var ws = new WebSocket("ws://localhost:8080/WebSocketSample/wsocket"); 
ws.onopen = function() { 
    console.log("Web Socket Open"); 
}; 

    ws.onmessage = function(message) { 
     console.log("MSG from Server :"+message.data); 
//document.getElementById("msgArea").textContent += message.data + "\n";  
document.getElementById("msgArea").textContent +" Data Send\n";  
    }; 
function postToServerNew(data) { 
ws.send(JSON.stringify(data)); 
document.getElementById("msg").value = ""; 
} 

//Set Interval 
setInterval(function(){ 
var target = $('body'); 
    html2canvas(target, { 
    onrendered: function(canvas) { 
    var data = canvas.toDataURL(); 
    var jsonData = { 
     type: 'video', 
     data: data, 
     duration: 5 , 
     timestamp: 0, // set in worker 
     currentFolder: 0,// set in worker 
    }; 
postToServerNew(jsonData); 
    } 
}); 
},9000); 

function closeConnect() { 
ws.close(); 
console.log("Web Socket Closed: Bye TC"); 
} 
</script> 
</head> 

<body> 
    <div> 
<textarea rows="18" cols="150" id="msgArea" readonly></textarea> 
</div> 
<div> 
<input id="msg" type="text"/> 
<button type="submit" id="sendButton" onclick="postToServerNew('Arun')">Send MSG</button> 
</div> 
</body> 
</html> 

Step2)Server Side 
File 1) 
package Arun.Work; 

import java.io.File; 
import java.io.FileInputStream; 
import java.io.FileOutputStream; 
import java.io.IOException; 
import java.io.RandomAccessFile; 
import java.nio.ByteBuffer; 
import java.nio.CharBuffer; 
import java.nio.MappedByteBuffer; 
import java.nio.channels.AsynchronousFileChannel; 
import java.nio.channels.FileChannel; 
import java.nio.charset.Charset; 
import java.nio.file.Paths; 
import java.nio.file.StandardOpenOption; 
import java.util.concurrent.ExecutionException; 
import java.util.concurrent.Future; 

import javax.servlet.http.HttpServletRequest; 

import org.apache.catalina.websocket.MessageInbound; 
import org.apache.catalina.websocket.WsOutbound; 

/** 
* Need tomcat-koyote.jar on class path, otherwise has compile error 
* "the hierarchy of the type ... is inconsistent" 
* 
* @author Arun 
* 
*/ 
public class MyInBound extends MessageInbound { 

    private String name; 

    private WsOutbound myoutbound; 

    private String targetLocation; 

    public MyInBound(HttpServletRequest httpSerbletRequest, String targetLocation) { 
     this.targetLocation = targetLocation; 
    } 

    @Override 
    public void onOpen(WsOutbound outbound) { 
     System.out.println("Web Socket Opened.."); 
     /*this.myoutbound = outbound; 
     try { 
      this.myoutbound.writeTextMessage(CharBuffer.wrap("Web Socket Opened..")); 

     } catch (Exception e) { 
      throw new RuntimeException(e); 
     }*/ 

    } 

    @Override 
    public void onClose(int status) { 
     System.out.println("Close client"); 
     // remove from list 
    } 

    @Override 
    protected void onBinaryMessage(ByteBuffer arg0) throws IOException { 
     System.out.println("onBinaryMessage Data"); 
     try { 
      writeToFileNIOWay(new File(targetLocation), arg0.toString() + "\n"); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } finally { 

      //this.myoutbound.flush(); 
     } 
    }// end of onBinaryMessage 

    @Override 
    protected void onTextMessage(CharBuffer inChar) throws IOException { 
     System.out.println("onTextMessage Data"); 
     try { 

      writeToFileNIOWay(new File(targetLocation), inChar.toString() + "\n"); 

     } catch (Exception e) { 
      e.printStackTrace(); 
     } finally { 

      //this.myoutbound.flush(); 
     } 
    }// end of onTextMessage 

    public void writeToFileNIOWay(File file, String messageToWrite) throws IOException { 
     System.out.println("Data Location:"+file+"   Size:"+messageToWrite.length()); 
     //synchronized (this){ 

      byte[] messageBytes = messageToWrite.getBytes(); 
      RandomAccessFile raf = new RandomAccessFile(file, "rw"); 
      raf.seek(raf.length()); 
      FileChannel fc = raf.getChannel(); 
      MappedByteBuffer mbf = fc.map(FileChannel.MapMode.READ_WRITE, fc.position(), messageBytes.length); 
      mbf.put(messageBytes); 
     fc.close(); 
     //} 


    }//end of method 

    /* 
    * //Working Fine public void writeToFileNIOWay(File file, String 
    * messageToWrite) throws IOException { byte[] messageBytes = 
    * messageToWrite.getBytes(Charset.forName("ISO-8859-1")); RandomAccessFile 
    * raf = new RandomAccessFile(file, "rw"); raf.seek(raf.length()); 
    * FileChannel fc = raf.getChannel(); MappedByteBuffer mbf = 
    * fc.map(FileChannel.MapMode.READ_WRITE, fc.position(), 
    * messageBytes.length); 
    * 
    * mbf.put(messageBytes); fc.close(); } 
    */ 
} 


File 2)  
package Arun.Work; 

import java.io.File; 
import java.util.concurrent.ConcurrentHashMap; 

import javax.servlet.annotation.WebServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpSession; 

import org.apache.catalina.websocket.StreamInbound; 
import org.apache.catalina.websocket.WebSocketServlet; 

/** 
* WebSocketServlet is contained in catalina.jar. It also needs servlet-api.jar 
* on build path 
* 
* @author Arun 
* 
*/ 
@WebServlet("/wsocket") 
public class MyWebSocketServlet extends WebSocketServlet { 

    private static final long serialVersionUID = 1L; 

    // for new clients, <sessionId, streamInBound> 
    private static ConcurrentHashMap<String, StreamInbound> clients = new ConcurrentHashMap<String, StreamInbound>(); 

    @Override 
    protected StreamInbound createWebSocketInbound(String protocol, HttpServletRequest httpServletRequest) { 

     // Check if exists 
     HttpSession session = httpServletRequest.getSession(); 

     // find client 
     StreamInbound client = clients.get(session.getId()); 
     if (null != client) { 
      return client; 

     } else { 
      System.out.println(" session.getId() :"+session.getId()); 
      String targetLocation = "C:/Users/arsingh/Desktop/AnupData/DATA/"+session.getId(); 
      System.out.println(targetLocation); 
      File fs=new File(targetLocation); 
      boolean bool=fs.mkdirs(); 
      System.out.println(" Folder created :"+bool); 
      client = new MyInBound(httpServletRequest,targetLocation+"/Output.txt"); 
      clients.put(session.getId(), client); 
     } 

     return client; 
    } 

    /*public StreamInbound getClient(String sessionId) { 
     return clients.get(sessionId); 
    } 

    public void addClient(String sessionId, StreamInbound streamInBound) { 
     clients.put(sessionId, streamInBound); 
    }*/ 
}