个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我无法上传 canvas.toDataURL 图像:我收到警告:
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 );
}
?>
最佳答案
我找到了一个丑陋的解决方案来解决我的问题:
<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.
});
使用 Flask 而不是 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})`
关于javascript - 无法上传canvas.toDataURL图像: Synchronous XMLHttpRequest on the main thread is deprecated，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38638231/
24
4
0
我已将 javascript 方法 toDataURL 返回的字符串保存在数据库中。示例如下: http://pastebin.com/0Qu8rngD 我需要在 django 响应中返回图像。像这样
我正在尝试创建 Canvas 绘图，但是当我使用 toDataUrl 时，它返回空 Canvas 文件。 这可能是因为 toDataUrl 在我的图像加载之前已触发，所以我该如何更改它，以便我尝试加载
我正在尝试生成 Canvas 的网址。以下是我遵循的步骤: var can = document.getElementsByTagName("canvas"); var src = can.toDat
assets.forEach(function(v) { var canvas = document.createElement('canvas'); canvas.id =
我有一份包含图表和表格的报告。 我正在使用 html2canvas与 jsPDF将此报告导出为 PDF 文件。 但是这个过程耗时很长，超过11000ms。 我尝试更改格式和质量，但没有任何效果。 请看
当我在浏览器中上传某个文件时，该文件类型为 jpeg，文件大小为 2MB，但是当我使用 canvas.toDataURL() 将文件编码为 Base64 时，大小为生成的文件约为 9MB。 为什么ba
toDataURL() 正在保存在 Canvas 上绘制的黑色覆盖/背景；但不是通过链接在同一 Canvas 上绘制图像。如果我只绘制一个图像并尝试将其保存为图像，则保存的是透明图像。 我研究了很多东
我正在尝试创建一些将文本保存到图像的工具，现在我已经构建了一些可以预览的工具。但我在下载时遇到了一个问题，它不断下载损坏的图像...... 我尝试了很多方法，但似乎没有任何效果，到目前为止我的下载代码
我有两套用于测试 html5 canvas 的代码 第 1 组 - 完美工作 var c = document.getElementById("myCanvas"); var ctx = c.ge
我有问题 .toDataURL()用于大 Canvas 。我想转告 base64并在 php 文件上解码，但如果我有一个大 Canvas ，strDataURI变量为空。 我的代码: var strD
我正在尝试在 python 中做与在 JavaScript 中完全相同的事情。在 JavaScript 中，我可以轻松地在 Canvas 上绘图，然后使用 toDataUrl(imageFormat,
你好， 我想裁剪我的 canvas.toDataURL()在将它发送到服务器之前，但我没有找到如何:( 这是我的代码: TakePhoto: function() { var myCa
我正在尝试实现this signature pad plugin进入我的 ColdFusion 应用程序。但是，我正在努力弄清楚如何使用 todataURL() 函数将 Canvas 绘图设置为 Co
我尝试过实现 signature_pad ，但说实话我不太明白。 如何返回图像值并将其发布到我的服务器？ 编辑: 我尝试过解码: JavaScript“app.js”: saveButton.addE
转到 this website 。 打开控制台并写入: ` var canvas = $("#mandelbox-canvas")[0]; var imgData = canvas.toDataURL
在android PhoneGap应用程序中，我使用html创建 Canvas 并在该 Canvas 中显示图像。然后使用canvas.toDataURL(image/jpg)尝试将图像转换为base
每当我尝试运行此程序时，我都会在 chrome 中收到类型错误:代码更新 // Get the drawing canvas canvas = $('#drawing'); context = can
我正在使用canvas 将图像转换为base64。我需要做的是转换这些图像，然后向用户显示结果(原始图像和 Base64 版本)。对于小图像，一切都按预期工作，但是当我尝试转换大图像(> 3MB)并且
我正在使用 Flot 版本 0.8.3 来显示多种类型的图表。我为用户提供了使用 .toDataURL('img/png') 从 Canvas 导出图表的选项。 导出的图像未显示刻度轴标签。我最终发现
我正在尝试将 HTML5 Canvas 的内容转换为 png 图像。 问题是 Canvas 包含未在本地托管的图像，因此出现安全错误。 我没有在本地托管图像的选项，有没有其他方法可以捕获 Canvas
我是一名优秀的程序员,十分优秀！