克隆一個畫布到另一個有問題

我已經檢查了將現有畫布克隆到另一個畫布的所有答案。但我無法完成。克隆一個畫布到另一個有問題

請檢查我目前的進度。 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

克隆一個畫布到另一個有問題

回答

相關問題