我需要从 2 个 Canvas 生成 1200x630 的最终图像,该图像不一定具有该尺寸,例如从移动设备查看应用程序。
这是 Canvas 的一部分,我正在根据用户操作绘制图片和项目,它有效。
<div>
<canvas width="1200" height="630" id="canvas-foto">Tu navegador no soporta esta aplicación</canvas>
<canvas width="1200" height="630" id="canvas-marco">Tu navegador no soporta esta aplicación</canvas>
<canvas width="1200" height="630" id="canvas-wrapper">Tu navegador no soporta esta aplicació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 内的元素可以由用户通过拖放重新定位。
您好!
最佳答案
您可以使用 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ón</canvas>
<canvas width="1200" height="630" id="canvas-marco">Tu navegador no soporta esta aplicación</canvas>
<canvas width="1200" height="630" id="canvas-wrapper">Tu navegador no soporta esta aplicación</canvas>
</div>
<div id="controls">
<button id="btn_guardar">Guardar</button>
<button id="btn_foto">foto <span>✓</span>
</button>
<button id="btn_marco">marco <span>✓</span>
</button>
<button id="btn_wrapper">wrapper <span>✓</span>
</button>
</div>
关于javascript - 如何从响应式 Canvas 获取图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34017318/