Resized canvas to image issue

Question

I am using canvas with fabric js. I am trying to convert the canvas area in image , which works ok but when i resize the canvas and try to convert resized canvas to image it does not work. The board is getting expanded and then it converts to image, i think because of its inline width, How ever when i try to modify that inline width and height the fabric element does not work.

Here is my code

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.js"></script>



<style>
    select {
    position: absolute;
    top: 1000px;
}
</style>
 
<div id="lemu">
    
    <canvas id='mycanvas' width='750' height='515' style='border:1px solid #000000;'></canvas>

</div>



<div class="japu">Click For Logo </div>
<img class="sf" src="" style="border:1px solid">


 <script language="JavaScript">

  $(document).ready(function () {
    jQuery('.japu').click(function(){
       var canstring = canvas.toDataURL("image/png", 1.0);
       jQuery('img').attr('src',canstring);   

});


var canvas = new fabric.Canvas('mycanvas');
 fabric.Image.fromURL('https://fallbacks.carbonads.com/nosvn/fallbacks/731050e6bd3fc6979e1cb1a972294dae.png', function(img) {

    var oImg = img.set({ left: 150, top: 0}).scale(0.4);
     
    canvas.add(oImg);
  });





    



jQuery('select').change(function(){

var valu = jQuery(this).val();
var candata = valu.split('x');


if(candata[0]==1){

    jQuery('canvas').width(750);

}  
else{

jQuery('canvas').width(candata[0]*20/2);
jQuery('.canvas-container').width(candata[0]*20/2);

}



});

     
});



    </script>




<select><option value="1x1">36x24</option> <option value="36x48">36x24</option>  <option value="36x48">36x96</option> </select>

Fiddle

https://jsfiddle.net/Lsuza1t5/

Marius Turcu · Accepted Answer · 2020-07-03T12:00:32.837

You have a crossOrigin problem. Here is an example that is working.

    $=jQuery;
  
  $(document).ready(function () {
        jQuery('.japu').click(function(){

         var canstring = canvas.toDataURL();
         
         jQuery('img').attr('src',canstring);   

          });

fabric.StaticCanvas.prototype.toCanvasElement =  function(multiplier, cropping) {
      multiplier = multiplier || 1;
      cropping = cropping || { };
      var scaledWidth = (cropping.width || this.width) * multiplier,
          scaledHeight = (cropping.height || this.height) * multiplier,
          zoomX = canvas.viewportTransform[0],
          zoomY = canvas.viewportTransform[3],
          originalWidth = this.width,
          originalHeight = this.height,
          newZoomX = zoomX * multiplier,
          newZoomY = zoomY * multiplier,
          vp = this.viewportTransform,
          translateX = (vp[4] - (cropping.left || 0)) * multiplier,
          translateY = (vp[5] - (cropping.top || 0)) * multiplier,
          originalInteractive = this.interactive,
          newVp = [newZoomX, 0, 0, newZoomY, translateX, translateY],
          originalRetina = this.enableRetinaScaling,
          canvasEl = fabric.util.createCanvasElement(),
          originalContextTop = this.contextTop;
      canvasEl.width = scaledWidth;
      canvasEl.height = scaledHeight;
      this.contextTop = null;
      this.enableRetinaScaling = false;
      this.interactive = false;
      this.viewportTransform = newVp;
      this.width = scaledWidth;
      this.height = scaledHeight;
      this.calcViewportBoundaries();
      this.renderCanvas(canvasEl.getContext('2d'), this._objects);
      this.viewportTransform = vp;
      this.width = originalWidth;
      this.height = originalHeight;
      this.calcViewportBoundaries();
      this.interactive = originalInteractive;
      this.enableRetinaScaling = originalRetina;
      this.contextTop = originalContextTop;
      return canvasEl;
};
    
window.canvas = new fabric.Canvas('mycanvas');
 fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {

    var oImg = img.set({ left: 200, top: 0}).scale(0.4);
     oImg.crossOrigin ='Anonymous';
    canvas.add(oImg);
  }, { crossOrigin: 'Anonymous' });

var currentWidth = canvas.getWidth();
   var currentHeight = canvas.getHeight();

jQuery('select').change(function(){

var valu = jQuery(this).val();
var candata = valu.split('x');

if(candata[0]==1){
   
   var newW = 200;
   var newH = 300;
   
   
   canvas.setWidth(newW);
   canvas.setHeight(newH);
   
   canvas.viewportTransform[0] = newW/currentWidth;
   canvas.viewportTransform[3] = newH/currentHeight;
   
    canvas.getObjects()[0].setCoords()

}  
else{

   var newW = 100;
   var newH = 100;
   
   canvas.setWidth(newW);
   canvas.setHeight(newH);
   
  canvas.viewportTransform[0] = newW/currentWidth;
   canvas.viewportTransform[3] = newH/currentHeight;
   
   canvas.getObjects()[0].setCoords()
//canvas.width = 100;
//jQuery('canvas').width(100);


}



});

     
});

Fiddle: https://jsfiddle.net/p1m7wt8v/4/ And here you have an explanation: Tainted canvases may not be exported

Hello Mauris thanks for response, Cross origin issue was having in fiddle , it was working on my local machine, The issue is after resizing canvas the clone does not grab the resized size, I updated my fiddle as well — , Jul 03 '20 at 09:51

Resized canvas to image issue

1 Answers1