将一个画布克隆到另一个有问题的画布

Question

我已经检查了所有将现有画布克隆到另一个画布的答案。但我无法完成它。

请检查我目前的进度。 http://jsfiddle.net/37n8rtdf/5/

第一个画布将被剪裁到您最初看到的那个正方形，并且该画布的内容将被添加到另一个画布中。但我不知道它总是在 chrome 中抛出 TYPE_MISMATCH_ERR: DOM Exception 171。我正在使用fabricjs 来剪辑内容。

感谢您的帮助。

谢谢

这是我的脚本代码：

HTML

        <textarea id="line_1"></textarea>
        <input type="button" id="render" value="Apply" />

        <input type="button" id="preview" value="preview" />


        <canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>


        <canvas id="c_new" width="500" height="500" style="border:1px solid red; margin: 30px;"></canvas>

`

Javascript

            var canvas = this.__canvas = new fabric.Canvas('c');
            var canvas_new = this.__canvas = new fabric.Canvas('c_new');
            var product_image = 'http://www.jail.se/hardware/digital_camera/canon/ixus_800is-powershot_sd700/images/sample_photos/sample3.jpg';
            //var ctx = canvas.getContext("2d");
            var polygon;
            $(document).ready(function(){

            fabric.Object.prototype.transparentCorners = false;


            //canvas.setDimensions({width:w,height:h});
            var center = canvas.getCenter();
            canvas.setBackgroundImage(product_image,
                canvas.renderAll.bind(canvas), {
                    scaleX:1,
                    scaleY:1,
                    top: center.top,
                    left: center.left,
                    originX: 'center',
                    originY: 'center',
                    backgroundImageOpacity: 0,
                    backgroundImageStretch: false
            });
            canvas_new.setBackgroundImage(product_image,
                canvas_new.renderAll.bind(canvas_new), {
                    scaleX:1,
                    scaleY:1,
                    top: center.top,
                    left: center.left,
                    originX: 'center',
                    originY: 'center'
            });




                polygon = new fabric.Polygon([
                    {x: 0, y: 0},
                    {x: 220, y: 0},
                    {x: 220, y: 180},
                    {x: 0, y: 180} ], {
                    left: 140,
                    top: 150,
                    angle: 0,
                    fill: 'transparent',
                    stroke: '#000', strokeWidth: 1,
                    lockMovementX: true,
                    lockMovementY: true,
                    lockScalingX: true,
                    lockScalingY: true,
                    lockRotation: true,
                    hasControls: false,
                    hasBorders: false,
                    hoverCursor: 'default',
                    overflow: 'hidden'
                });
                canvas.add(polygon);
         $('#render').click(function(){ return render(); });

                $('#preview').click(function(){ return rasterize(); });


        });

        function render()
        {
            var text_val = $('#line_1').val();

            var comicSansText = new fabric.Text(text_val, {
              fontWeight: 'normal'
            });
            canvas.add(comicSansText.set({ left: 200, top: 150, angle: 0 }));
        }




          function rasterize()
          {
              var shape = canvas.item(0);
              polygon.strokeWidth=0;
              canvas.renderAll();
            //canvas.remove(shape);
            canvas.clipTo = function(ctx) {
                shape.render(ctx);
            };

            var ctx2    = canvas_new.getContext('2d');
            ctx2.drawImage(canvas, 0, 0);
          }

`

Answer 1

@WinterMute 是对的，您正在尝试绘制 Fabric 对象而不是画布元素。

您的织物对象似乎嵌入了两个画布（lowerCanvasEl 和 upperCanvasEl）。 所以你可以稍微修改一下你的代码，让它看起来像：

function rasterize() {
  var shape = canvas.item(0);
  polygon.strokeWidth = 0;
  canvas.renderAll();

  canvas.clipTo = function(ctx) {
    shape.render(ctx);
  };
  var ctx2 = canvas_new.getContext('2d');
  ctx2.drawImage(canvas.lowerCanvasEl, 0, 0);
  ctx2.drawImage(canvas.upperCanvasEl, 0, 0);
}

Updated fiddle