net::ERR_FILE_NOT_FOUND在JavaScript中创建图像元素并尝试使用后发生

huangapple
go评论97阅读模式
英文:

net::ERR_FILE_NOT_FOUND after creating an img element in JavaScript and trying to use it

问题

在JavaScript中，我创建了一个img元素，并将DataURI作为其来源：

  1. img = new document.createElement('img');
  2. 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:

  1. img = new document.createElement('img');
  2. 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:
    net::ERR_FILE_NOT_FOUND在JavaScript中创建图像元素并尝试使用后发生

Other info:

OS: Manjaro Linux | Chromium version: 110.0.5481.177 | Firefox version: 110.0

答案1

得分: 1

使用onload处理程序修复：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. const board = document.getElementById('board');
  5. const ctx = board.getContext('2d');
  7. const board2 = document.getElementById('board2');
  8. const ctx2 = board2.getContext('2d');
  10. function draw() {
  11.   ctx.moveTo(40, 40);
  12.   ctx.lineTo(40, 80);
  13.   ctx.lineTo(80, 0);
  14.   ctx.stroke();
  15. }
  17. function transfer() {
  18.   img = new Image();
  19.   img.src = board.toDataURL('png'); //saveFrame()
  21.   img.onload = () => {
  22.     ctx2.drawImage(img, 0, 0);
  23.   }
  24. }
  26. <!-- language: lang-css -->
  27. body {
  28.   background: black;
  29. }
  31. canvas {
  32.   background: white;
  33. }
  35. button {
  36.   z-index: 3;
  37. }
  39. <!-- language: lang-html -->
  40. <canvas id="board"></canvas>
  41. <canvas id="board2"></canvas>
  42. <button onclick="draw()">draw image</button>
  43. <button onclick="transfer()">transfer image</button>
  45. <!-- end snippet -->

使用getImageData()方法更好，不需要onload处理程序：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. const board = document.getElementById('board');
  5. const ctx = board.getContext('2d');
  7. const board2 = document.getElementById('board2');
  8. const ctx2 = board2.getContext('2d');
  10. function draw() {
  11.   ctx.moveTo(40, 40);
  12.   ctx.lineTo(40, 80);
  13.   ctx.lineTo(80, 0);
  14.   ctx.stroke();
  15. }
  17. function transfer() {
  18.   img = ctx.getImageData(0, 0, board.width, board.height); //saveData()
  20.   ctx2.putImageData(img, 0, 0);
  21. }
  23. <!-- language: lang-css -->
  24. body {
  25.   background: black;
  26. }
  28. canvas {
  29.   background: white;
  30. }
  32. button {
  33.   z-index: 3;
  34. }
  36. <!-- language: lang-html -->
  37. <canvas id="board"></canvas>
  38. <canvas id="board2"></canvas>
  39. <button onclick="draw()">draw image</button>
  40. <button onclick="transfer()">transfer image</button>
  42. <!-- end snippet -->

这是两个代码示例，第一个使用了onload处理程序，第二个使用了getImageData()方法，并且不需要onload处理程序。

英文:

fixed by using onload handler:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const board = document.getElementById(&#39;board&#39;);
  2. const ctx = board.getContext(&#39;2d&#39;);
  4. const board2 = document.getElementById(&#39;board2&#39;);
  5. const ctx2 = board2.getContext(&#39;2d&#39;);
  7. function draw(){
  8.   ctx.moveTo(40,40);
  9.   ctx.lineTo(40,80);
  10.   ctx.lineTo(80,0);
  11.   ctx.stroke();
  12. }
  14. function transfer(){
  15.   img = new Image();
  16.   img.src = board.toDataURL(&#39;png&#39;); //saveFrame()
  18.   img.onload = ()=&gt;{
  19.     ctx2.drawImage(img, 0, 0);
  20.   }
  21. }

<!-- language: lang-css -->

  1. body{
  2.   background: black;
  3. }
  5. canvas{
  6.   background: white;
  7. }
  9. button{
  10.   z-index: 3;
  11. }

<!-- language: lang-html -->

  1. &lt;canvas id=&quot;board&quot;&gt;&lt;/canvas&gt;
  3. &lt;canvas id=&quot;board2&quot;&gt;&lt;/canvas&gt;
  5. &lt;button onclick=&quot;draw()&quot;&gt;draw image&lt;/button&gt;
  6. &lt;button onclick=&quot;transfer()&quot;&gt;transfer image&lt;/button&gt;

<!-- 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 -->

  1. const board = document.getElementById(&#39;board&#39;);
  2. const ctx = board.getContext(&#39;2d&#39;);
  4. const board2 = document.getElementById(&#39;board2&#39;);
  5. const ctx2 = board2.getContext(&#39;2d&#39;);
  7. function draw(){
  8.   ctx.moveTo(40,40);
  9.   ctx.lineTo(40,80);
  10.   ctx.lineTo(80,0);
  11.   ctx.stroke();
  12. }
  14. function transfer(){
  15.   img = ctx.getImageData(0,0,board.width,board.height); //saveData()
  17.   ctx2.putImageData(img, 0, 0);
  18. }

<!-- language: lang-css -->

  1. body{
  2.   background: black;
  3. }
  5. canvas{
  6.   background: white;
  7. }
  9. button{
  10.   z-index: 3;
  11. }

<!-- language: lang-html -->

  1. &lt;canvas id=&quot;board&quot;&gt;&lt;/canvas&gt;
  3. &lt;canvas id=&quot;board2&quot;&gt;&lt;/canvas&gt;
  5. &lt;button onclick=&quot;draw()&quot;&gt;draw image&lt;/button&gt;
  6. &lt;button onclick=&quot;transfer()&quot;&gt;transfer image&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月27日 04:18:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/75574776.html
  • html
  • html5-canvas
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定