Javascript 我们可以不使用任何形式发送文件并上传吗

我有一个按钮，可以使用html2canvas从表中获取screentshot 然后获取它的dataurl并将其放在img元素src上 之后，我想用ajax发送我放在img元素src上的这个图像 （要获得更多帮助，我正在使用sharepoint，我想从网格中获取屏幕截图，并将其发送到库中以保存此图片） 按钮点击js

window.take = function () {
alert('screen');
html2canvas(document.querySelector("#c_Grid1")).then(canvas => {

document.body.appendChild(canvas)
let pnGImage = convertCanvasToImage(canvas);
document.body.appendChild(pnGImage);
$("body").append( "<img id='screenshot' src='"+ pnGImage +"'>" );
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', upFile);

});
}
take();

window.take=函数（）{
警报（“屏幕”）；
html2canvas（document.querySelector（“#c#u Grid1”））。然后（canvas=>{
document.body.appendChild（画布）
设pnGImage=convertCanvasToImage（画布）；
文件.正文.附件（pnGImage）；
$（“正文”）。追加（“”）；
SP.SOD.executeFunc（'SP.js'，'SP.ClientContext'，upFile）；
});
}
take（）；

发送图像的功能

function convertCanvasToImage(canvas) {
  let image = new Image();
  image.src = canvas.toDataURL();
  return image;
}




        var arrayBuffer;  
        var fileInput; 
           var attachmentFiles; 
           
        function upFile()  
        {  
        
                   console.log('upFile');
            //Get File Input Control and read th file name  
            var element = $("#screenshot");
            img =  element.attr('src');
            if(element.length > 0){
              var file = img
             var fileName = "test.png";  
            //Read File contents using file reader  
            var reader = new FileReader();  
            reader.onload = function(e)  
            {  
                uploadFile(e.target.result, fileName);  
            }  
            reader.onerror = function(e)  
            {  
                alert(e.target.error);  
            }  
            reader.readAsArrayBuffer(file);  
            
            }
            
        }  
        
        function tester(){
        console.log('nothing')
        }
 
  
        function uploadFile(arrayBuffer, fileName)  
        {  
           console.log('uploadFile');
            //Get Client Context,Web and List object.  
            var clientContext = new SP.ClientContext();  
            var oWeb = clientContext.get_web();  
            var oList = oWeb.get_lists().getByTitle('emailingdocument');  
            //Convert the file contents into base64 data  
            var bytes = new Uint8Array(arrayBuffer);  
            var i, length, out = '';  
            for (i = 0, length = bytes.length; i < length; i += 1)  
            {  
                out += String.fromCharCode(bytes[i]);  
            }  
            var base64 = btoa(out);  
            //Create FileCreationInformation object using the read file data  
            var createInfo = new SP.FileCreationInformation();  
            createInfo.set_content(base64);  
            createInfo.set_url(fileName);  
            //Add the file to the library  
            var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)  
            //Load client context and execcute the batch  
            clientContext.load(uploadedDocument);  
            clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
        }  
  
        function QuerySuccess()  
        {  
            console.log('File Uploaded Successfully.');  
        }  
  
        function QueryFailure(sender, args)  
        {  
            console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());  
        }  

函数转换CANVASTOIMAGE（画布）{
让图像=新图像（）；
image.src=canvas.toDataURL（）；
返回图像；
}
var arrayBuffer；
var文件输入；
var附件文件；
函数upFile（）
{  
log（'upFile'）；
//获取文件输入控件并读取文件名
变量元素=$（“#屏幕截图”）；
img=element.attr（'src'）；
如果（element.length>0）{
var file=img
var fileName=“test.png”；
//使用文件读取器读取文件内容
var reader=new FileReader（）；
reader.onload=函数（e）
{  
上传文件（e.target.result，文件名）；
}  
reader.onerror=函数（e）
{  
警报（如目标错误）；
}  
reader.readAsArrayBuffer（文件）；
}
}  
功能测试仪（）{
console.log（'nothing'）
}
函数上载文件（arrayBuffer，文件名）
{  
log（'uploadFile'）；
//获取客户端上下文、Web和列表对象。
var clientContext=new SP.clientContext（）；
var oWeb=clientContext.get_web（）；
var oList=oWeb.get_lists（）.getByTitle（'emailingdocument'）；
//将文件内容转换为base64数据
var字节=新的Uint8Array（arrayBuffer）；
变量i，长度，out=''；
对于（i=0，length=bytes.length；i

我问了我的问题，这就是答案

屏幕截图是画布，我们应该将其转换为base64以使用它

然后我们需要删除数据：/image，从字符串中，然后将其转换为blob 使用filerader上载和保存文件

function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
}



var contentType = 'image/png';

function convertCanvasToImage(canvas) {
    return canvas.toDataURL();
}

var arrayBuffer;
var fileInput;
var attachmentFiles;

function upFile() {

    console.log('upFile');
    //Get File Input Control and read th file name  
    var element = $("#screenshot");
    var str = element.attr('src');
    var img = str.replace("data:image/png;base64,", "");
    var blob = b64toBlob(img,contentType);
    var blobUrl = URL.createObjectURL(blob);

        var file = blob;
        var fileName = "test.png";
        uploadFile();
        //Read File contents using file reader  
        var reader = new FileReader();
        reader.onload = function (e) {
            uploadFile(e.target.result, fileName);
        }
        reader.onerror = function (e) {
            alert(e.target.error);
        }
        reader.readAsArrayBuffer(file);


}

function tester() {
    console.log('nothing')
}


function uploadFile(arrayBuffer, fileName)
{
    //Get Client Context,Web and List object.  
    var clientContext = new SP.ClientContext();
    var oWeb = clientContext.get_web();
    var oList = oWeb.get_lists().getByTitle('emailingdocument');
    //Convert the file contents into base64 data  
    var bytes = new Uint8Array(arrayBuffer);
    var i, length, out = '';
    for (i = 0, length = bytes.length; i < length; i += 1) {
        out += String.fromCharCode(bytes[i]);
    }
    var base64 = btoa(out);
    //Create FileCreationInformation object using the read file data  
    var createInfo = new SP.FileCreationInformation();
    createInfo.set_content(base64);
    createInfo.set_url(fileName);
    //Add the file to the library  
    var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)
    //Load client context and execcute the batch  
    clientContext.load(uploadedDocument);
    clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
}

function QuerySuccess() {
    console.log('File Uploaded Successfully.');
}

function QueryFailure(sender, args) {
    console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
}

函数b64toBlob（b64Data，contentType=''，sliceSize=512）{
var byteCharacters=atob（b64Data）；
var ByteArray=[]；
for（让offset=0；offset