不能上傳圖片canvas.toDataURL：在主線程同步的XMLHttpRequest已過時

我不能上傳圖片canvas.toDataURL：我得到警告：不能上傳圖片canvas.toDataURL：在主線程同步的XMLHttpRequest已過時

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/

，然後錯誤：

no element found testSave.php:23:1

在本tutorial，我的JavaScript是：

var canvasData = testCanvas.toDataURL("image/png"); 
var ajax = new XMLHttpRequest(); 
ajax.open("POST",'testSave.php',false); 
ajax.setRequestHeader('Content-Type', 'application/upload'); 
ajax.send(canvasData);

和testSave.php：

<?php 
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
{ 
    // Get the data 
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA']; 

    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to  check image type 
    $filteredData=substr($imageData, strpos($imageData, ",")+1); 

    // Need to decode before saving since the data we received is already base64 encoded 
    $unencodedData=base64_decode($filteredData); 

//echo "unencodedData".$unencodedData; 

// Save file. This example uses a hard coded filename for testing, 
// but a real application can specify filename in POST variable 
$fp = fopen('test.png', 'wb'); 
fwrite($fp, $unencodedData); 
fclose($fp); 
} 
?>

來源

2016-07-28 Mostafa

你正在嘗試做一個同步的XMLHttpRequest（其已被棄用），並且可能找不到testSave.php。 – jolmos

好吧，它已被棄用，我知道它，但我應該做什麼，而不是上傳這張圖片？文件testSave.php被找到，當我點擊鏈接時，它給我的文件 – Mostafa

如果PHP沒有被執行，那麼你沒有一個Web服務器（或沒有正確配置） – jolmos

我發現了一個醜陋的解決我的問題：

在HTML <head>，添加：

<script src="../static/js/jquery-1.11.2.js"></script>

替換問題的JavaScript部分：

var dataURL = canvas.toDataURL('image/png'); 

$.ajax({ 
type: "POST", 
url: "upload_ajax", 
data: { 
    imgBase64: dataURL 
    } 
}).done(function(o) { 
console.log('saved'); 
// If you want the file to be visible in the browser 
// - please modify the callback in javascript. All you 
// need is to return the url to the file, you just saved 
// and than put the image in your browser. 
});

使用瓶，而不是PHP，與代碼存在的相關部分：

from flask import json as jsonflask import cv2 import uuid import os import base64 import numpy as np import StringIO import urllib from PIL import Image

def request_to_nparray(request): output=request.form['imgBase64'] head = "data:image/png;base64," assert(output.startswith(head)) imgdata = base64.b64decode(output[len(head):]) imgF = StringIO.StringIO() imgF.write(imgdata) imgF.seek(0) img = Image.open(imgF) buf = np.fliplr(np.asarray(img)) buf = np.asarray(img) bufshape=buf.shape rgbFrame = np.zeros(bufshape, dtype=np.uint8) rgbFrame[:, :, 0] = buf[:, :, 2] rgbFrame[:, :, 1] = buf[:, :, 1] rgbFrame[:, :, 2] = buf[:, :, 0] ourframe = np.copy(rgbFrame) return ourframe

`@app.route('/upload_ajax', methods = ['POST']) 
def ajax_request(): 
    photo_array= request_to_nparray(request) 
    f_name = str(uuid.uuid4()) + '.jpg' 
    _photo_path= os.path.join(app.config['UPLOAD_FOLDER'], f_name) 
    cv2.imwrite(_photo_path, photo_array) 
    return jsonflask.dumps({'filename':f_name})`

來源

2016-07-29 13:54:41 Mostafa

不能上傳圖片canvas.toDataURL：在主線程同步的XMLHttpRequest已過時

回答

相關問題