Javascript 如何从响应画布获取图像？

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

这是画布的一部分，我正在根据用户的动作绘制图片和项目，效果很好

<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>

现在我必须实现这个响应，但是重新调整画布的大小，最终的图像也会改变。如何从较小的画布上获得1200x630的图像

阐明用户可以通过拖放重新定位画布中的元素

---

你好

您可以使用CSS更改画布显示大小。此示例将宽度设置为100%收缩或增长图像，而不改变画布

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'）。单击（函数（）{
ctx_wrapper.drawImage（canvas_foto，0,0）；
ctx_wrapper.drawImage（canvas_marcos，0,0）；
var dataURL=canvas_wrapper.toDataURL（）；
var img=新图像（）；
img.style.position=“绝对”；
img.style.left=“0”；
img.style.top=“0”；
img.style.width=“100%”；
img.onload=函数（）{
文件.正文.附件（img）；
this.addEventListener（“单击”，函数（）{
this.parentElement.removeChild（this）；
重置（）；
});
}
img.src=数据URL；
});
//我加的
函数toggleCanvas（）{
$（this.toggleClass（'off'）；
var can_id=“canvas-”+this.id.replace（“btn_-”，“”）；
$（'#'+can_id）.toggleClass（'hide'）；
}
$（'btn'u foto'）。单击（切换画布）；
$（'btn_marco'）。单击（切换画布）；
$（'#btn_包装器'）。单击（切换画布）；
功能清除（ctx、颜色、文本、y_偏移）{
ctx.fillStyle=颜色；
var w=ctx.canvas.width；
var h=ctx.canvas.height；
ctx.clearRect（0,0，w，h）；
ctx.fillRect（0,0,w,h）；
ctx.fillStyle=“白色”；
ctx.font=“50px无衬线”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.fillText（文本，w/2，h/2+y_偏移）；
}
函数重置（）{
清晰（ctx_foto，“rgba（0,0,0,7）”，“画布foto”，0）；
清晰（ctx_marcos，“rgba（0100,0,7）”，“canvas marco”，50）；
透明（ctx_包装，“rgba（10,30130.7）”，“帆布包装”，100）；
}
重置（）
正文{
填充：0；
保证金：0；
}
#帆布福托，
#画布马可，
#帆布包装{
宽度：100%；
保证金：0；
位置：绝对位置；
左：0；
排名：0；
}
#控制{
位置：绝对位置；
背景色：#00CC66；
填充：10px；
}
.隐藏{
显示：无；
}
按钮关闭{
背景颜色：浅灰色；
颜色：灰色；
边框颜色：灰色；
}
按钮关闭范围{
可见性：隐藏；
}
钮扣{
背景色：白色；
颜色：黑色；
边框：1px纯黑；
}

你不知道该怎么做；N
你不知道该怎么做；N
你不知道该怎么做；N
瓜达尔
福图✓；
马可✓；
包装纸✓；
如果需要在服务器上存储的是用户在画布上移动不同对象后的最终图像，最好的解决方案是将对象位置存储为JSON字符串并重新绘制，而不是保存渲染图像

最终，服务器上的数据会少得多，用户可以再次修改显示

通过这种方式，您将能够在每个屏幕大小上正确地重新绘制它，避免CSS抖动，并且您甚至能够以您想要的任何大小导出它

通过使用
ctx.scale（）
，每个绘图操作甚至可以为任何比例保持相同的位置，您只需为鼠标事件计算它


（函数（）{
var ctx=canvas.getContext（'2d'）；
////////////////////
//对象存储//
////////////////////
//不幸的是，堆栈片段上的localStorage将引发安全异常。。。
/*
//从本地存储保存，也可以从服务器保存
var fromStorage=function（）{
var str=localStorage.getItem（'objects'）；
如果（！str）返回false；
返回JSON.parse（str）；
};
//保存到本地存储或服务器
var toStorage=function（）{
setItem（'objects'，JSON.stringify（objects））；
}
*/
//…所以只需显示可以保存在服务器上的字符串即可
var toStorage=function（）{
log.innerHTML=JSON.stringify（对象）；
};
save.onclick=toStorage；
//启动以前存储的对象或默认对象
//var objects=fromStorage（）
变量对象=[
{类型：'rect'，x:900，y:360，宽度：100，高度：100，颜色：'blue'}，
{类型：'circle'，x:150，y:60，宽：72，高：72，颜色：'red'}，
{类型：'image'，url:http://lorempixel.com/500/500，x:500，y:250，宽：300，高：300}
];
//初始化画布
var init=函数（）{
//设置画布的大小并获取比例
设置大小（大小[0]）；
//检查是否有要加载的图像
对于（var i=0；ivar 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;
});