Question

我正在使用Django框架，我想在画布上加载一个图像然后在它上面绘制。

使用以下代码我成功加载了图像：

<form method="post" enctype="multipart/form-data">
<input TYPE="button" onClick="myReload();" VALUE="Refresh">
<script>
    function myReload() {
        location.reload();
    }
 </script>
   {% csrf_token %}
<input type="file" name="myfile">
<button type="submit">Upload</button>

</form>

{% if uploaded_file_url %}
<p>File uploaded at: <a href="{{ uploaded_file_url }}">{{ uploaded_file_url }}</a></p>
{% endif %}

<canvas id="canvas" width="768" height="576" style="border:1px solid #d3d3d3"></canvas>

  {% if name_of_file  %}
      <img id="image" style="display: none;" src="/static/{{ name_of_file }}">

  {% endif %}

我正在尝试在加载的图像上绘制一个多边形。当我按下＆＃39; Draw＆＃39;按钮我可以在画布上绘制，但我上传的图像消失了。

<button  onclick="drawPolygon()" name="plaque">Draw</button>

 function drawPolygon() {
     var img = new Image;
   img.onload= function() {
      document.getElementById("canvas").style.cursor="crosshair";
      var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    function reOffset(){
      var BB=canvas.getBoundingClientRect();
      offsetX=BB.left;
      offsetY=BB.top;
    }
    var offsetX,offsetY;
    reOffset();
    window.onscroll=function(e){ reOffset(); }

    context.lineWidth=2;
    context.strokeStyle='blue';

    var coordinates = [];
    var isDone=false;

    $('#done').click(function(){
      isDone=true;

    });

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

    function handleMouseDown(e){
      if(isDone || coordinates.length>10){return;}

      // tell the browser we're handling this event
      e.preventDefault();
      e.stopPropagation();

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      coordinates.push({x:mouseX,y:mouseY});
     var stringY = document.getElementById('yA1').value;
      document.getElementById('yA1').value = stringY + ' ' +parseInt(e.clientY-offsetY);
       var stringX = document.getElementById('xA1').value;
      document.getElementById('xA1').value = stringX + ' ' +parseInt(e.clientX-offsetX);
      drawPolygon();
    }

    function drawPolygon(){
      context.clearRect(0,0,cw,ch);

      context.beginPath();
      context.moveTo(coordinates[0].x, coordinates[0].y);
      for(index=1; index<coordinates.length;index++) {
        context.lineTo(coordinates[index].x, coordinates[index].y);

      }
      context.closePath();
      context.stroke();

    }
    }
       img.src ="/static/{{ name_of_file }}" ;
 }

我错过了什么？

Answer 1

尝试删除以下行

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <ol>
    <li>Enter text then click the <kbd>BLR</kbd> button to unfocus from the input thereby triggering the change event.</li>
    <li>Next, refresh this page and the text entered should be in the input again.</li>
    <li>In order to remove the text from localStorage, click the <kbd>CLR</kbd> button.</li>
  </ol>

  <input class='card-1' value=''>
  <input class='blur' type='button' value='BLR'>
  <input class='clear' type='button' value='CLR'>

  <output class='view'></output>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>

</html>

clearRect用于重置画布的一部分（here is the mozilla documentation）

当用户在画布上绘制时，画布上的加载图像会消失

1 个答案: