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の答えを使用してキャンバスオブジェクトを変換しようとしましたが（私はこれを行う必要があるとは確信していませんが）。

---

私はちょうど私が何をする必要があるか理解するのに役立ち（特にbebrawさん@）がimgurにファイルをアップロードする方法についてquestionを尋ね、と回答。

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>要素から1つだけ送信します。

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 APIにスクリーンショットをアップロードし、imgur urlを返します。

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