[英]How to convert a python list of tuples to an array in JavaScript?
I am trying to make a website using Flask, where I pass in HTML canvas data to a database and then use that data in another route.我正在尝试使用 Flask 制作一个网站,在那里我将 HTML 画布数据传递到数据库,然后在另一条路线中使用该数据。 When I retrieve the data from the database, it's in the form of a list, here's an example of that list with only one element :
当我从数据库中检索数据时,它是一个列表的形式,这是一个只有一个元素的列表示例:
[(1, 'circle', '{"pencil":[{"startx":346,"starty":105,"endx":346,"endy":105,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":344,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":341,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":333,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":330,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":109,"thick":2,"color":"#000000"}],"line":[],"rectangle":[],"circle":[],"eraser":[]}', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAHCCAYAAACwm0waAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W2SI9lVBuDr/vD8gOgmAsLegNkGrB22Ke4KQjEiAAAECBAgQIEBAcbcHCBAgQIAAAQIECCQQ+D/vr4ThKs0KewAAAABJRU5ErkJggg==', '10', '10', '100', '100')]
Following several previous answers given in this type of question, I tried the following approach, first I used json.dumps()
:根据此类问题中给出的几个先前的答案,我尝试了以下方法,首先我使用了
json.dumps()
:
In Flask:在烧瓶中:
files = json.dumps(files)
return render_template("edit.html", files=files)
In edit.html
, I pass it into a function simply as:在
edit.html
,我简单地将它传递给一个函数:
<button id="show" onclick="loadImages(`{{ files }}`)">View</button>
Finally in edit.js
, I try to read it in an array as follows:最后在
edit.js
,我尝试在数组中读取它,如下所示:
function loadImages(sources) {
var canvas = document.getElementById("paint");
var ctx = canvas.getContext("2d");
console.log(sources);
sources = JSON.parse(sources);
console.log(typeof(sources));
for(var i = 0; i < sources.length; i++) {
ctx.drawImage(sources[i][3], sources[i][4], sources[i][5], sources[i][6], sources[i][7]);
}
}
But this returns an error:但这会返回一个错误:
Uncaught SyntaxError: Unexpected token p in JSON at position 18
at JSON.parse (<anonymous>)
at loadImages (edit.js:16)
at HTMLButtonElement.onclick (edit:39)
The output of the console.log(sources)
in the loadImages
function is : loadImages
函数中console.log(sources)
的输出是:
[[1, "circle", "{"pencil":[{"startx":346,"starty":105,"endx":346,"endy":105,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":344,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":341,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":338,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":333,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":330,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":326,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":326,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":322,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":319,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":317,"endy":103,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":315,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":314,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":312,"endy":104,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":311,"endy":105,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":310,"endy":106,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":308,"endy":106,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":307,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":306,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":304,"endy":109,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":302,"endy":110,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":301,"endy":111,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":107,"thick":2,"color":"#000000"},{"startx":346,"starty":105,"endx":336,"endy":109,"thick":2,"color":"#000000"}],"line":[],"rectangle":[],"circle":[],"eraser":[]}", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAHCCAYAAACwm0waAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W2SI9lVBuDr/vD8gOgmAsLegNkGrB22ARuAgAimDT/G022ItCuH7LRUkkpS3vPxTITDMK5Snvu8N1VvZ6eyfjX8Q4AAAQIECBAgQIBAeIFfhZ/QgAQIECBAgAABAgQIDMXdJiBAgAABAgQIECCQQEBxTxCSEQkQIECAAAECBAgo7vYAAQIECBAgQIAAgQQCinuCkIxIgAABAgQIECBAQHG3BwgQIECAAAECBAgkEFDcE4RkRAIECBAgQIAAAQKKuz1AgAABAgQIECBAIIGA4p4gJCMSIECAAAECBAgQUNztAQIECBAgQIAAAQIJBBT3BCEZkQABAgQIECBAgIDibg8QIECAAAECBAgQSCCguCcIyYgECBAgQIAAAQIEFHd7gAABAgQIECBAgEACAcU9QUhGJECAAAECBAgQIKC42wMECBAgQIAAAQIEEggo7glCMiIBAgQIECBAgAABxd0eIECAAAECBAgQIJBAQHFPEJIRCRAgQIAAAQIECCju9gABAgQIECBAgACBBAKKe4KQjEiAAAECBAgQIEBAcbcHCBAgQIAAAQIECCQQUNwThGREAgQIECBAgAABAoq7PUCAAAECBAgQIEAggYDiniAkIxIgQIAAAQIECBBQ3O0BAgQIECBAgAABAgkEFPcEIRmRAAECBAgQIECAgOJuDxAgQIAAAQIECBBIIKC4JwjJiAQIECBAgAABAgQUd3uAAAECBAgQIECAQAIBxT1BSEYkQIAAAQIECBAgoLjbAwQIECBAgAABAgQSCCjuCUIyIgECBAgQIECAAAHF3R4gQIAAAQIECBAgkEBAcU8QkhEJECBAgAABAgQIKO72AAECBAgQIECAAIEEAop7gpCMSIAAAQIECBAgQEBxtwcIECBAgAABAgQIJBBQ3BOEZEQCBAgQIECAAAECirs9QIAAAQIECBAgQCCBgOKeICQjEiBAgAABAgQIEFDc7QECBAgQIECAAAECCQQU9wQhGZEAAQIECBAgQICA4m4PECBAgAABAgQIEEggoLgnCMmIBAgQIECAAAECBBR3e4AAAQIECBAgQIBAAgHFPUFIRiRAgAABAgQIECCguNsDBAgQIECAAAECBBIIKO4JQjIiAQIECBAgQIAAAcXdHiBAgAABAgQIECCQQEBxTxCSEQkQIECAAAECBAgo7vYAAQIECBAgQIAAgQQCinuCkIxIgAABAgQIECBAQHG3BwgQIECAAAECBAgkEFDcE4RkRAIECBAgQIAAAQKKuz1AgAABAgQIECBAIIGA4p4gJCMSIECAAAECBAgQUNztAQIECBAgQIAAAQIJBBT3BCEZkQABAgQIECBAgIDibg8QIECAAAECBAgQSCCguCcIyYgECBAgQIAAAQIEFHd7gAABAgQIECBAgEACAcU9QUhGJECAAAECBAgQIKC42wMECBAgQIAAAQIEEggo7glCMiIBAgQIECBAgAABxd0eIECAAAECBAgQIJBAQHFPEJIRCRAgQIAAAQIECCju9gABAgQIECBAgACBBAKKe4KQjEiAAAECBAgQIEBAcbcHCBAgQIAAAQIECCQQUNwThGREAgQIECBAgAABAoq7PUCAAAECBAgQIEAggYDiniAkIxIgQIAAAQIECBBQ3O0BAgQIECBAgAABAgkEFPcEIRmRAAECBAgQIECAgOJuDxAgQIAAAQIECBBIIKC4JwjJiAQIECBAgAABAgQUd3uAAAECBAgQIECAQAIBxT1BSEYkQIAAAQIECBAgoLjbAwQIECBAgAABAgQSCCjuCUIyIgECBAgQIECAAAHF3R4gQIAAAQIECBAgkEBAcU8QkhEJECBAgAABAgQIKO72AAECBAgQIECAAIEEAop7gpCMSIAAAQIECBAgQEBxtwcIECBAgAABAgQIJBBQ3BOEZEQCBAgQIECAAAECirs9QIAAAQIECBAgQCCBgOKeICQjEiBAgAABAgQIEFDc7QECBAgQIECAAAECCQQU9wQhGZEAAQIECBAgQICA4m4PECBAgAABAgQIEEggoLgnCMmIBAgQIECAAAECBBR3e4AAAQIECBAgQIBAAgHFPUFIRiRAgAABAgQIECCguNsDBAgQIECAAAECBBIIKO4JQjIiAQIECBAgQIAAAcXdHiBAgAABAgQIECCQQEBxTxCSEQkQIECAAAECBAgo7vYAAQIECBAgQIAAgQQCinuCkIxIgAABAgQIECBAQHG3BwgQ6CLwxzHGke95X8cYH7vgWicBAgQIPF/gyB9iz1+NIxAgQODPAj+OMT4FwfjfMca7ILMYgwABAgQSCyjuicMzOgECJwVeK+1HlOifxxgfdpMtV/vfy4sAAQIECNwggg==", "10", "10", "100", "100"]]
I tried multiple approaches to get this done, but this was the closest I could reach to what I want, how do I proceed to correct this?我尝试了多种方法来完成这项工作,但这是我能达到的最接近我想要的,我该如何解决这个问题?
I found few problems in this code - all with template:我在这段代码中发现了一些问题 - 都是模板:
template in flask escapes data (to make it safer) so using {{ file }}
it creates HTML with烧瓶中的模板会转义数据(以使其更安全),因此使用
{{ file }}
创建 HTML
[[1, "circle", "{\\"pencil\\":[
You can see it in browser if you use Show Page Source
( Ctrl+U
).如果您使用
Show Page Source
( Ctrl+U
),您可以在浏览器中看到它。
It needs {{ file|safe }}
to create correct HTML它需要
{{ file|safe }}
来创建正确的 HTML
[[1, "circle", "{\\"pencil\\":[
it doesn't need ticks in loadImages( ``...`` )
它不需要在
loadImages( ``...`` )
中loadImages( ``...`` )
because files
puts string with " "
so loadImage
has to be in ' '
因为
files
将字符串与" "
放在一起,所以loadImage
必须在' '
onclick='loadImages({{ files|safe }})'
browser treats text from files
as normal code so it parses data at loading and it doesn't need JSON.parse()
浏览器将
files
文本视为普通代码,因此它在加载时解析数据并且不需要JSON.parse()
to draw image you have to create Image
and assign data to .src
要绘制图像,您必须创建
Image
并将数据分配给.src
var img = new Image(); img.src = sources[i][3]; ctx.drawImage(img, ...)
Minimal working code最少的工作代码
EDIT:编辑:
You don't have to use json.dumps(data)
but {{ data|tojson }}
你不必使用
json.dumps(data)
但{{ data|tojson }}
Eventually you can use {{ data|safe }}
but it will need to change some " "
into ' '
.最终您可以使用
{{ data|safe }}
但它需要将一些" "
更改为' '
。
from flask import Flask, request, render_template_string
import json
app = Flask(__name__)
data = [(1, 'circle',
'{"pencil":[\
{"startx":346,"starty":105,"endx":346,"endy":105,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":344,"endy":104,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":341,"endy":103,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":338,"endy":103,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":336,"endy":103,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":333,"endy":103,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":330,"endy":103,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":338,"endy":107,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":336,"endy":107,"thick":2,"color":"#000000"},\
{"startx":346,"starty":105,"endx":336,"endy":109,"thick":2,"color":"#000000"}],\
"line":[],"rectangle":[],"circle":[],"eraser":[]\
}',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAMklEQVR4nEXNwQkAMBACwfFI/y2bxwXia8FFUwF1pCCNJTIIwaD04ctsKRyaldI/9i8u1iwOE6FA880AAAAASUVORK5CYII=',
'10', '10', '10', '10'
)]
@app.route('/', methods=['GET', 'POST'])
def index():
text = json.dumps(data)
return render_template_string('''
<script>
function loadImages(sources) {
console.log(sources);
var canvas = document.getElementById("paint");
var ctx = canvas.getContext("2d");
for(var i = 0; i < sources.length; i++) {
var data = sources[i]
console.log(data[3]);
var img = new Image();
img.src = data[3];
ctx.drawImage(img, data[4], data[5]); //, data[6], data[7]);
}
}
</script>
<body>
<h1>files</h1>
<pre>{{ files }}</pre>
<h1>files|safe</h1>
<pre>{{ files|safe }}</pre>
<h1>files|tojson</h1>
<pre>{{ files|tojson }}</pre>
<hr>
<canvas id="paint" width="100" height="100"></canvas><br/>
<button id="show" onclick='loadImages({{ files|safe <button id="show" onclick='loadImages({{ files|safe }})'>View files|safe</button>
<button id="show" onclick='loadImages({{ data|tojson }})'>View data|tojson</button>
<button id="show" onclick="loadImages({{ data|safe }})">View data|safe</button>
</body>
''', files=text, data=data)
if __name__ == '__main__':
#app.debug = True
app.run()
For your data:image
I get error image broken
so I use my small icon 10x10对于您的
data:image
我得到错误image broken
所以我使用我的小图标 10x10
but I don't know why but sometimes I have to click button two times to see image.但我不知道为什么但有时我必须单击按钮两次才能看到图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.