小编use*_*869的帖子

我有一个画布,用户可以使用div他们点击的另一个图像创建一个设计,将它发送到Fabric.js画布,在那里它被移动,依此类推.由于画布的大小width="270"和height="519",比成品是什么时,我需要的是有大小画布重建它width="1001"和height="1920",然后截图,以便我得到这一切在1个图像.我该怎么做呢？

这是我的代码到目前为止的样子:

HTML

<div id="CanvasContainer">
    <canvas id="Canvas" width="270" height="519"></canvas>
</div>

CSS

#CanvasContainer {
    width: 270px;
    height: 519px;
    margin-left: 15px;
}
#Canvas {
    overflow: hidden;
}

JAVASCRIPT

//Defining Canvas and object array
var canvas = new fabric.Canvas('Canvas');

//When clicked
$(document).ready(function () {
    $("#Backgrounds img").click(function () {
        var getId = $(this).attr("id");

        //adding all clicked images
        var imgElement = document.getElementById(getId);
        var imgInstance = new fabric.Image(imgElement, {
            left: 135,
            top: 259,
            width: 270,
            height: …

我有一个Fabric.js canvas.我还有一个javascript,它有一个按下按钮时被调用的函数.我知道如何获取活动对象,canvas.getActiveObject()但我不知道如何只更改其中的值而无需进行克隆并删除原始对象.我之所以想改变原版是因为当再次按下按钮时,会发生奇怪的事情.有关如何做到这一点的任何线索？

我有一个网站，用户可以在其中在 Fabric.js 画布中移动图像。我希望能够在更大的画布上重新创建他们的“设计”，所以我的问题是；使用原始变量重新创建画布有哪些不同的方法？

现在即时通讯使用JSON.stringify(canvas);取回数据，但它不是一个真正理想的，因为我接下来要再次复制粘贴的变量，它看起来像这样：type":"image","originX":"center","originY":"center","left":135,"top":259,"。关于如何做到这一点的任何建议，或者是JSON.stringify(canvas);然后复制粘贴所有数据最简单？

我有一个使用 Fabric.js 的画布，用户可以在其中移动图像来进行设计。如何从每个单独的对象获取所有数据，以便可以在图像编辑器中重新创建它？

画布看起来像这样：

超文本标记语言

<div id="CanvasContainer">
    <canvas id="Canvas" width="270" height="519"></canvas>
</div>

脚本语言

//Defining Canvas and object array
var canvas = new fabric.Canvas('Canvas');
var canvasObject = new Array();

//When clicked
$(document).ready(function () {
    $("#Backgrounds img").click(function () {
        var getId = $(this).attr("id");

        //adding all clicked images
        var imgElement = document.getElementById(getId);
        var imgInstance = new fabric.Image(imgElement, {
            left: 135,
            top: 259,
            width: 270,
            height: 519
        });
        //Corner color for clicked images
        imgInstance.set({
            borderColor: 'white',
            cornerColor: 'black',
            transparentCorners: false,
            cornerSize: 12
        });
        canvas.add(imgInstance); …

我有一个文本框,用户可以在其中键入内容.出于某种原因,我无法获得该文本框的内容,我得到的只是"未定义".

有谁知道如何解决这个问题？

谢谢

HTML

<div id="Text">
    <input type="text" id="TextBox">
</div>

JavaScript的

function addText() {
    var TextBoxContent = document.getElementsByName("TextBox").value;
    alert(TextBoxContent);
}