Question

我正在尝试使用pv()函数合并两个图像。问题是，我无法看到我在这里做错了什么。我只能看到合并图像出现在哪里的空白框。我在调试方面几乎尝试了所有我知道的东西，但是时间紧迫。

以下是我在browser中看到的内容：

这是我的index.html文件：

<!DOCTYPE html>
<html>

  <head>
     <title>My practice web app</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="index.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="firstBar"></div>

    <script type="text/babel" src="index.js"></script>

  </body>

</html>

这是我的index.js文件：

var Website = React.createClass({

   scrolling: function() {
     $('html,body').animate({
         scrollTop: $(".scrollToPortfolio").offset().top
        },'slow');
   },

   scrollToAbout: function() {
     $('html,body').animate({
       scrollTop: $(".scrollToAbout").offset().top
     },'slow');
   },

   scrollToContact: function() {
     $('html,body').animate({
       scrollTop: $(".scrollToContact").offset().top
     },'slow')
   },

    pv: function() {
      var c = document.getElementsByClassName('pv')[0];
      var ctx = c.getContext("2d");
      var catering1 = new Image();
      var contact1 = new Image();

    catering1.src = "./catering1.png";
      catering1.onload = function() {
        ctx.drawImage(catering1,0,0,328,526);
        contact1.src = "./contact1.png";
        contact1.onload = function() {
          ctx.drawImage(contact1,0,0,328,526);
        }
      }
    },

  render: function() {
    return(

      <div className="container">
      <kbd className="fullName">My practice web app</kbd>
        <button onClick={this.scrolling} type="button" className="btn btn-primary portfolio">Portfolio</button>
        <button onClick={this.scrollToAbout} type="button" className="btn btn-primary about">About</button>
        <button onClick={this.scrollToContact}type="button" className="btn btn-primary contact">Contact</button>

        <div className="trainPic">
        <img src={"./pictures/myPic3.JPG"} className="myPic"></img>
        </div>

        <div className="scrollToPortfolio">
          <h2><u>Portfolio</u></h2>
            <canvas className="img-responsive img-thumbnail pv"></canvas>
        </div>

        <div className="scrollToAbout">
          <h2><u>About</u></h2>
          <h2>Text</h2>
          <h2>Text</h2>
        </div>

        <div className="scrollToContact">
          <h2><u>Contact</u></h2>
          <h1 className="number">(333) 333 3333</h1>
          <strong className="email"><a href="mailto:someemail">someEmail@email.com</a></strong>
           <p className="jumbotron">
            <a className="btn btn-social-icon btn-lg btn-github githubIcon ">
             <span className="fa fa-github"></span>
           </a>
          </p>
        </div>



      </div>
    );
  }
});

ReactDOM.render(<Website/>, document.getElementById('firstBar'));

Answer 1

试试这个pv方法：

pv: function() {
    var c = document.getElementsByClassName('pv')[0];
    var ctx = c.getContext("2d");
    var img1 = new Image();
    var img2 = new Image();
    img1.src = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';   
    img1.onload = function(){
        ctx.drawImage(img1,0,0,328,526);
          img2.src = "http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg";
          img2.onload = function(){
              ctx.globalAlpha = 0.4; // added this line
              ctx.drawImage(img2,0,0,328,526);
          }         
    };         
},

检查jsfiddle上的工作代码：https://jsfiddle.net/ddz7on3e/

为什么我的合并图像画布不会出现？（ReactJS）

1 个答案:

为什么我的合并图像画布不会出现？ （ReactJS）

1 个答案:

为什么我的合并图像画布不会出现？（ReactJS）