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

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

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

第一个画布将被剪裁到您最初看到的那个正方形，并且该画布的内容将被添加到另一个画布中。但我不知道它总是会抛出铬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); 
      }

来源

2015-09-15 Parixit

帖子在StackOverflow上应包括问题的最小再现。否则，如果链接关闭，帖子就没有意义了。 – Joseph

@JosephtheDreamer我编辑了问题。对不起，我赶时间。 – Parixit

@WinterMute是正确的，你想画布料对象，而不是canvas元素。

您的面料对象似乎嵌入了两个画布（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

来源

2015-09-16 04:12:36 Kaiido

@ kaiodp，这不符合预期。在'rasterize（）'中，我将所有图层剪切到该多边形。然后最终的输出将被复制到新的画布上。 – Parixit

我不知道fabricjs够了（这就是为什么我在WinterMute问我之前没有回答），但'clipTo'是一种方法，我怀疑你的代码中还有一些其他问题我现在无法挖掘。但是我的答案涵盖了将画布复制到另一个画布的部分。现在，你必须使你的第一个画布实际上剪辑到你想要的位置（没有库的我会使用'drawImage（CanvasElement，sourceX，sourceY，sourceWidth，sourceHeight，targetX，targetY，targetWidth，targetHeight）;'但是我认为clipTo可能会它是安德伍德。 – Kaiido

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

回答

相关问题