英文:
net::ERR_FILE_NOT_FOUND after creating an img element in JavaScript and trying to use it
问题
在JavaScript中，我创建了一个img元素，并将DataURI作为其来源：
img = new document.createElement('img');
img.src = saveFrame();
saveFrame函数返回一个有效的DataURI，当我尝试运行console.log(img)时，图像元素似乎正常，但当我尝试运行cctx.drawImage(img, x, y, cboard.width, cboard.height)时，它抛出错误。
我尝试过的方法：
- 使用
var：var img = document.createElement('img') - 使用
new Image()：img = new Image()
我期望图像被绘制到画布上（画布名为cboard，具有上下文cctx）。
实际结果：
- Firefox：控制台没有输出，不起作用。
- Chromium：代码不起作用，并抛出错误。
英文:
I created an img element in JavaScript and gave it a DataURI as a source:
img = new document.createElement('img');
img.src = saveFrame();
The saveFrame function returns a DataURI (which is valid), and when i try console.log(img) the image element seems alright, but when i try running cctx.drawImage(img, x, y, cboard.width, cboard.height) it throws the error.
What I've tried:
- using
var:var img = document.createElement('img') - using
new Image():img = new Image()
I expected the Image to get drawn onto the canvas (that's called cboard, and has a context: cctx)
Actual results:
- Firefox: gives no output in the console, and it doesn't work.
- Chromium: the code doesn't work and throws:
Other info:
OS: Manjaro Linux | Chromium version: 110.0.5481.177 | Firefox version: 110.0
答案1
得分: 1
使用onload处理程序修复：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const board = document.getElementById('board');
const ctx = board.getContext('2d');
const board2 = document.getElementById('board2');
const ctx2 = board2.getContext('2d');
function draw() {
ctx.moveTo(40, 40);
ctx.lineTo(40, 80);
ctx.lineTo(80, 0);
ctx.stroke();
}
function transfer() {
img = new Image();
img.src = board.toDataURL('png'); //saveFrame()
img.onload = () => {
ctx2.drawImage(img, 0, 0);
}
}
<!-- language: lang-css -->
body {
background: black;
}
canvas {
background: white;
}
button {
z-index: 3;
}
<!-- language: lang-html -->
<canvas id="board"></canvas>
<canvas id="board2"></canvas>
<button onclick="draw()">draw image</button>
<button onclick="transfer()">transfer image</button>
<!-- end snippet -->
使用getImageData()方法更好，不需要onload处理程序：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const board = document.getElementById('board');
const ctx = board.getContext('2d');
const board2 = document.getElementById('board2');
const ctx2 = board2.getContext('2d');
function draw() {
ctx.moveTo(40, 40);
ctx.lineTo(40, 80);
ctx.lineTo(80, 0);
ctx.stroke();
}
function transfer() {
img = ctx.getImageData(0, 0, board.width, board.height); //saveData()
ctx2.putImageData(img, 0, 0);
}
<!-- language: lang-css -->
body {
background: black;
}
canvas {
background: white;
}
button {
z-index: 3;
}
<!-- language: lang-html -->
<canvas id="board"></canvas>
<canvas id="board2"></canvas>
<button onclick="draw()">draw image</button>
<button onclick="transfer()">transfer image</button>
<!-- end snippet -->
这是两个代码示例，第一个使用了onload处理程序，第二个使用了getImageData()方法，并且不需要onload处理程序。
英文:
fixed by using onload handler:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const board = document.getElementById('board');
const ctx = board.getContext('2d');
const board2 = document.getElementById('board2');
const ctx2 = board2.getContext('2d');
function draw(){
ctx.moveTo(40,40);
ctx.lineTo(40,80);
ctx.lineTo(80,0);
ctx.stroke();
}
function transfer(){
img = new Image();
img.src = board.toDataURL('png'); //saveFrame()
img.onload = ()=>{
ctx2.drawImage(img, 0, 0);
}
}
<!-- language: lang-css -->
body{
background: black;
}
canvas{
background: white;
}
button{
z-index: 3;
}
<!-- language: lang-html -->
<canvas id="board"></canvas>
<canvas id="board2"></canvas>
<button onclick="draw()">draw image</button>
<button onclick="transfer()">transfer image</button>
<!-- end snippet -->
using the getImageData() method is better, and doesn't require the onload handler:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const board = document.getElementById('board');
const ctx = board.getContext('2d');
const board2 = document.getElementById('board2');
const ctx2 = board2.getContext('2d');
function draw(){
ctx.moveTo(40,40);
ctx.lineTo(40,80);
ctx.lineTo(80,0);
ctx.stroke();
}
function transfer(){
img = ctx.getImageData(0,0,board.width,board.height); //saveData()
ctx2.putImageData(img, 0, 0);
}
<!-- language: lang-css -->
body{
background: black;
}
canvas{
background: white;
}
button{
z-index: 3;
}
<!-- language: lang-html -->
<canvas id="board"></canvas>
<canvas id="board2"></canvas>
<button onclick="draw()">draw image</button>
<button onclick="transfer()">transfer image</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论