javascript - 如何从响应式 Canvas 获取图像？

Question

我需要从 2 个 Canvas 生成 1200x630 的最终图像，该图像不一定具有该尺寸，例如从移动设备查看应用程序。

这是 Canvas 的一部分，我正在根据用户操作绘制图片和项目，它有效。

<div>
    <canvas width="1200" height="630" id="canvas-foto">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
    <canvas width="1200" height="630" id="canvas-marco">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
    <canvas width="1200" height="630" id="canvas-wrapper">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
</div>
<button id="btn_guardar">Guardar</button>

这将是负责生成图像的 JS 的一部分，例如只是松散地显示在屏幕上，尽管我将其保存在服务器上。

var canvas_marcos = document.getElementById("canvas-marco");
var ctx_marcos = canvas_marcos.getContext("2d");
var canvas_foto = document.getElementById("canvas-foto");
var ctx_foto = canvas_foto.getContext("2d");
var canvas_wrapper = document.getElementById("canvas-wrapper");
var ctx_wrapper = canvas_wrapper.getContext("2d");

$('#btn_guardar').click(function(){
    ctx_wrapper.drawImage(canvas_foto, 0, 0);
    ctx_wrapper.drawImage(canvas_marcos, 0, 0);

    var dataURL = canvas_wrapper.toDataURL();

    var img = new Image();

    img.onload = function(){
        document.body.appendChild(img);
    }
    img.src = dataURL;
});

现在我必须实现这个响应式，但是重新缩放 Canvas 大小，最终图像也会改变。如何从较小的 Canvas 中获取 1200x630 的图像？

阐明 Canvas 内的元素可以由用户通过拖放重新定位。

您好!

Answer 1

您可以使用 CSS 更改 Canvas 显示大小。此示例将宽度设置为 100%，在不改变 Canvas 的情况下缩小或扩大图像。

var canvas_marcos = document.getElementById("canvas-marco");
var ctx_marcos = canvas_marcos.getContext("2d");
var canvas_foto = document.getElementById("canvas-foto");
var ctx_foto = canvas_foto.getContext("2d");
var canvas_wrapper = document.getElementById("canvas-wrapper");
var ctx_wrapper = canvas_wrapper.getContext("2d");

$('#btn_guardar').click(function() {
  ctx_wrapper.drawImage(canvas_foto, 0, 0);
  ctx_wrapper.drawImage(canvas_marcos, 0, 0);

  var dataURL = canvas_wrapper.toDataURL();

  var img = new Image();
  img.style.position = "absolute";
  img.style.left = "0";
  img.style.top = "0";
  img.style.width = "100%";

  img.onload = function() {
    document.body.appendChild(img);
    this.addEventListener("click", function() {
      this.parentElement.removeChild(this);
      reset();
    });
  }

  img.src = dataURL;
});

// added by me

function toggleCanvas() {
  $(this).toggleClass('off');
  var can_id = "canvas-" + this.id.replace("btn_", "");
  $('#' + can_id).toggleClass('hide');
}

$('#btn_foto').click(toggleCanvas);
$('#btn_marco').click(toggleCanvas);
$('#btn_wrapper').click(toggleCanvas);


function clear(ctx, color, text, y_offset) {
  ctx.fillStyle = color;
  var w = ctx.canvas.width;
  var h = ctx.canvas.height;
  ctx.clearRect(0,0,w,h);
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = "white";
  ctx.font = "50px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(text, w / 2, h / 2 + y_offset);
}

function reset() {
  clear(ctx_foto, "rgba(0,0,0,.7)", "canvas-foto", 0);
  clear(ctx_marcos, "rgba(0,100,0,.7)", "canvas-marco", 50);
  clear(ctx_wrapper, "rgba(10,30,130,.7)", "canvas-wrapper", 100);
}

reset();

body {
  padding: 0;
  margin: 0;
}
#canvas-foto,
#canvas-marco,
#canvas-wrapper {
  width: 100%;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
}
#controls {
  position: absolute;
  background-color: #00CC66;
  padding: 10px;
}
.hide {
  display: none;
}
button.off {
  background-color: lightgray;
  color: gray;
  border-color: gray;
}
button.off span {
  visibility: hidden;
}
button {
  background-color: white;
  color: black;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <canvas width="1200" height="630" id="canvas-foto">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
  <canvas width="1200" height="630" id="canvas-marco">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
  <canvas width="1200" height="630" id="canvas-wrapper">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
</div>
<div id="controls">
  <button id="btn_guardar">Guardar</button>
  <button id="btn_foto">foto <span>&#10003;</span>
  </button>
  <button id="btn_marco">marco <span>&#10003;</span>
  </button>
  <button id="btn_wrapper">wrapper <span>&#10003;</span>
  </button>
</div>