带有/图像克隆问题的HTML画布

时间：2014-10-22 16:10:50

标签： javascript html5 canvas html5-canvas

我使用了来自this post的提示+代码来尝试克隆我的原始画布 - 它包含一个文本覆盖在其上的图像。但是，每次运行它时，图像和文本都不会被复制，尽管原始工作正常。这是javascript：

<script>          
function CardText() {
            var title = document.calform.titleText.value;
            var badge = document.calform.badge.value;
            var encourage = document.calform.encourage.value;
            var description = document.calform.description.value;
            
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var imageObj = new Image();
      
      
      
      
        

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
        context.font = "25pt Helvetica";
        context.fillStyle = "white";
        context.textAlign = "center";
        context.fillText(title, x, 76);
        
        context.font = "18pt Arial";
        context.fillStyle = "white";
        context.textAlign = "center";
        context.fillText(badge, x-10, 311);
        
        context.font = "18pt Arial";
        context.fillStyle = "black";
        context.textAlign = "center";
        context.fillText(encourage, x, 380);
        
        context.font = "12pt Arial";
        context.fillStyle = "black";
        wrapText(context, description, x, 440, 280, 18);
        
        
        
        
      };
    

      imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';
     
            }
    function cloneCanvas(oldCanvas) {

        //create a new canvas
        var newCanvas = document.createElement('canvas');
        var context = newCanvas.getContext('2d');
    

        //set dimensions
        newCanvas.width = oldCanvas.width;
        newCanvas.height = oldCanvas.height;

        //apply the old canvas to the new one
        context.drawImage(oldCanvas, 100, 300);
    
    
        //return the new canvas
        return newCanvas;
        }

        </script>

我用一个html按钮运行它：

 <input class="btn btn-lg btn-primary" align = 'center' type=button name=button1 value="COPY" onClick="cloneCanvas(canvas)">

非常感谢任何帮助！

编辑：markE足以解决我的问题，但它不会出现在完整的HTML文档中。这是完整的HTML：

<!DOCTYPE html>

<html>
  <head>
    <style>
      body {
     background-color:ivory;
     padding:10px;
     }
      
      #fills {
        position: relative;
        margin-left: 100px;
      }
      canvas{
        border:1px solid red;
        }
    </style>
   <link href="bootstrap.min.css" rel="stylesheet">  
  </head>
  <body>

   
        
        
        <script>
            
      

       var canvas = document.getElementById('myCanvas');
       var context = canvas.getContext('2d');

       var imageObj = new Image();
       imageObj.onload = function() {

      // create the original card canvas 
      // after the image has loaded
      CardText();

      // next clone the original card canvas
      // to a new canvas 
      var myNewCanvas=cloneCanvas(canvas);
      document.body.appendChild(myNewCanvas);

      };
      imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';


function CardText() {

  var title ="Title";// document.calform.titleText.value;
  var badge ="Badge";// document.calform.badge.value;
  var encourage ="Encourage";// document.calform.encourage.value;
  var description ="Description";// document.calform.description.value;

  var x = canvas.width / 2;
  var y = canvas.height / 2;

  context.drawImage(imageObj, 0, 0);

  context.font = "25pt Helvetica";
  context.fillStyle = "white";
  context.textAlign = "center";
  context.fillText(title, x, 76);

  context.font = "18pt Arial";
  context.fillStyle = "white";
  context.textAlign = "center";
  context.fillText(badge, x-10, 311);

  context.font = "18pt Arial";
  context.fillStyle = "black";
  context.textAlign = "center";
  context.fillText(encourage, x, 380);

  context.font = "12pt Arial";
  context.fillStyle = "black";
  context.fillText(description, x, 440);
  //      wrapText(context, description, x, 440, 280, 18);

}


function cloneCanvas(oldCanvas) {

  //create a new canvas
  var newCanvas = document.createElement('canvas');
  var context = newCanvas.getContext('2d');


  //set dimensions
  newCanvas.width = oldCanvas.width;
  newCanvas.height = oldCanvas.height;

  //apply the old canvas to the new one
  context.drawImage(oldCanvas, 100, 300);


  //return the new canvas
  return newCanvas;

}
        </script>
        <div id="fills" >
    <td align=right width=200>Title:</td>
        <td><input type=text name=titleText size=10 maxlength=10></td>
        
        <td align=right width=200>Badge Name:</td>
        <td><input type=text name=badge size=10 maxlength=10></td>
        
        <td align=right width=200>Encouraging Words:</td>
        <td><input type=text name=encourage size=10 maxlength=14></td>
        
        <td align=right width=200>Description:</td>
        <td><input type=text name=description size=50 maxlength=120></td>
            
    <input class="btn btn-lg btn-primary" align = 'center' type=button name=button1 value="Submit" onClick="CardText()">
        </div>
   
    
    
    
    <canvas id="myCanvas" width="390" height="540"></canvas>
    
  </body>
</html>

1 个答案:

答案 0 :(得分：0)

在cloneCanvas有机会完全加载图片并在图片上绘制文字之前，您似乎可能正在调用CardText。

尝试此重构，在尝试cloneCanvas之前完全加载图片+文字。

enter image description here

示例代码和演示：

＆＃13;
＆＃13; 
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var imageObj = new Image();
imageObj.onload = function() {

  // create the original card canvas 
  // after the image has loaded
  CardText();

  // next clone the original card canvas
  // to a new canvas 
  var myNewCanvas=cloneCanvas(canvas);
  document.body.appendChild(myNewCanvas);

};
imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';


function CardText() {

  var title ="Title";// document.calform.titleText.value;
  var badge ="Badge";// document.calform.badge.value;
  var encourage ="Encourage";// document.calform.encourage.value;
  var description ="Description";// document.calform.description.value;

  var x = canvas.width / 2;
  var y = canvas.height / 2;

  context.drawImage(imageObj, 0, 0);

  context.font = "25pt Helvetica";
  context.fillStyle = "white";
  context.textAlign = "center";
  context.fillText(title, x, 76);

  context.font = "18pt Arial";
  context.fillStyle = "white";
  context.textAlign = "center";
  context.fillText(badge, x-10, 311);

  context.font = "18pt Arial";
  context.fillStyle = "black";
  context.textAlign = "center";
  context.fillText(encourage, x, 380);

  context.font = "12pt Arial";
  context.fillStyle = "black";
  context.fillText(description, x, 440);
  //      wrapText(context, description, x, 440, 280, 18);

}


function cloneCanvas(oldCanvas) {

  //create a new canvas
  var newCanvas = document.createElement('canvas');
  var context = newCanvas.getContext('2d');


  //set dimensions
  newCanvas.width = oldCanvas.width;
  newCanvas.height = oldCanvas.height;

  //apply the old canvas to the new one
  context.drawImage(oldCanvas, 100, 300);


  //return the new canvas
  return newCanvas;

}
＆＃13; 
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
＆＃13; 
<canvas id="myCanvas" width=390 height=540></canvas>
＆＃13;
＆＃13;
＆＃13;

[补充：将我上面的答案插入Allen Rabinovich的代码中。 ]

＆＃13;
＆＃13; 
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var imageObj = new Image();
imageObj.onload = function() {

  // create the original card canvas 
  // after the image has loaded
  CardText();


};
imageObj.src = 'https://i.imgur.com/7wqLgSd.jpg';

document.getElementById('drawAll').onclick=function(){
  CardText();
  // next clone the original card canvas
  // to a new canvas 
  var myNewCanvas=cloneCanvas(canvas);
  document.body.appendChild(myNewCanvas);
}


function CardText() {

  var title=document.getElementsByName('titleText')[0].value;
  var badge=document.getElementsByName('badge')[0].value;
  var encourage=document.getElementsByName('encourage')[0].value;
  var description=document.getElementsByName('description')[0].value;

  var x = canvas.width / 2;
  var y = canvas.height / 2;

  context.drawImage(imageObj, 0, 0);

  context.font = "25pt Helvetica";
  context.fillStyle = "white";
  context.textAlign = "center";
  context.fillText(title, x, 76);

  context.font = "18pt Arial";
  context.fillStyle = "white";
  context.textAlign = "center";
  context.fillText(badge, x-10, 311);

  context.font = "18pt Arial";
  context.fillStyle = "black";
  context.textAlign = "center";
  context.fillText(encourage, x, 380);

  context.font = "12pt Arial";
  context.fillStyle = "black";
  context.fillText(description, x, 440);
  //      wrapText(context, description, x, 440, 280, 18);

}


function cloneCanvas(oldCanvas) {

  //create a new canvas
  var newCanvas = document.createElement('canvas');
  var context = newCanvas.getContext('2d');


  //set dimensions
  newCanvas.width = oldCanvas.width;
  newCanvas.height = oldCanvas.height;

  //apply the old canvas to the new one
  context.drawImage(oldCanvas,0,0);


  //return the new canvas
  return newCanvas;

}
＆＃13; 
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
#fills{ position: relative; margin-left: 100px; }
＆＃13; 
Title:<input type=text name=titleText size=10 maxlength=10><br>
Badge:<input type=text name=badge size=10 maxlength=10><br>
Encourage:<input type=text name=encourage size=10 maxlength=14><br>
Description:<input type=text name=description size=50 maxlength=120><br>
<input id=drawAll class="btn btn-lg btn-primary" align = 'center' type=button name=button1 value="Submit">
<canvas id="myCanvas" width="390" height="540"></canvas>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题