Question

我试图建立一个页面，用户可以自定义画布，然后将完成的项目通过电子邮件发送给自己。我使用以下javascript设置画布的背景：

const child_process = require("child_process");
const os = require("os");

.
.
.

//Problem code below

let flywayMigrate = function(dbpassword){
  return new Promise(function(){
    let child = child_process.spawn(                              
      "./flyway",                                      
      ["migrate"],                                     
      {                                                
        cwd : "/home/admin/flyway"                     
      }
    );
    child.stdout.on("data", function(data){
      let out = data.toString();
      console.log(out);
      //containsString(haystack, needle) being a utility method
      if(containsString(out, "Database password:")){
        child.stdin.write(dbpassword);
        child.stdin.write(os.EOL);
      }
    });
    child.stderr.on("data",function(data){
      console.log(data.toString());
      reject();
    });
    child.on("exit", function(){
      console.log("child process finished");
      resolve();
    });
  });
}

并在页面上包含一个表单以填充画布的其余部分。我已经尝试了各种方法来包含canvas.toDataURL（），以便将画布保存为稍后可以通过电子邮件发送给它们的图像，但背景图像不是保存图像的一部分。（与Canvas to Save Image and Email类似的问题，但我的文字不会保存我的图像）

我一直在尝试各种变化，但它不适合我。

function setbackground1() {
  document.getElementById('myCanvas').setAttribute("class", 
 "background1");
}
function setbackground2() {
  document.getElementById('myCanvas').setAttribute("class", 
 "background2");
}

我相信我不得不同时引用myCanvas id

  function setbackground11() {

    var img = new Image();
    img.src = 'background1.jpg';
    img.onload = function () {
      ctx.fillRect( 0, 0, canvas.width, canvas.height )
    }
}

Answer 1

CSS样式不是画布图像的一部分。对于纯色：

ctx.fillStyle = 'green'
ctx.fillRect( 0, 0, canvas.width, canvas.height )

对于图像：

var img = new Image();
img.src = 'background1.jpg';
img.onload = function () {
    ctx.drawImage( img, 0, 0, canvas.width, canvas.height )
    // do the rest of your drawing over the background
}

画布和背景作为图像

1 个答案: