Convert canvas into image with background image in html5

Question

I was implemented convert canvas into image, But when i am set background image, But it will not works. I am using fabric js for canvas, But whenever i am set background image then canvas not converting in image. After set background image then i am clicking on My Click!! final image should be come. I have one JFFiddle. https://jsfiddle.net/varunPes/vb1weL93/

Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
 <div class="col-sm-12">                    
      <div class="text-center" style="font-size:25;margin-top:17px;margin-bottom: 30px;"><strong>Customize T-Shirt From Here</strong></div>
             <input type="file" id="file">            
             <br/>
              <canvas id="canvas" width="750" height="550" style="border: 1px solid black;  box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas>
              <a href='' id='txt' target="_blank">Click Me!!</a><br />
              <img id="preview" />
  </div>

Java Script:

 var canvas = new fabric.Canvas('canvas');

            // initialize fabric canvas and assign to global windows object for debug         

            canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg', canvas.renderAll.bind(canvas), {
            });



            document.getElementById('file').addEventListener("change", function (e) {
                var file = e.target.files[0];
                var reader = new FileReader();
                console.log("reader   " + reader);
                reader.onload = function (f) {

                    var data = f.target.result;
                    fabric.Image.fromURL(data, function (img) {
                        var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
                        canvas.add(oImg).renderAll();
                        canvas.setActiveObject(oImg);
                    });
                };
                reader.readAsDataURL(file);
            });

            document.querySelector('#txt').onclick = function (e) {
                e.preventDefault();
                canvas.deactivateAll().renderAll();                
                document.querySelector('#preview').src = canvas.toDataURL();
            };

You should be getting a message on your console. In Chrome its __Tainted canvases may not be exported.__ meaning canvases that you add images from external domains from cannot be saved — Patrick Evans, Jan 19 '16 at 09:07
As an dirty workaround for a similar case i used BASE64 converted images for background. But again, it gives you about 30% memory overhead. And there must be some other way to do it. — Lorin, Jan 19 '16 at 09:13

score 3 · Accepted Answer · edited May 23 '17 at 11:52

As Patrick Evans told you, you have a cross-origin issue.

Luckily enough, the image you pointed in your question is served from a domain that does send the proper headers to be used through cross-domains.

For this to work, you have to set the crossOrigin parameter of your setBackgroundImage() method :

var canvas = new fabric.Canvas('canvas');

canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg', 
    canvas.renderAll.bind(canvas),
    // here set the crossOrigin attribute
    {crossOrigin: 'anonymous'}
    );



document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {

    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 70,
        top: 100,
        width: 250,
        height: 200,
        angle: 0
      }).scale(0.9);
      canvas.add(oImg).renderAll();
      canvas.setActiveObject(oImg);
    });
  };
  reader.readAsDataURL(file);
});

document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<div class="col-sm-12">
  <div class="text-center" style="font-size:25;margin-top:17px;margin-bottom: 30px;"><strong>Customize T-Shirt From Here</strong>
  </div>
  <input type="file" id="file">
  <br/>
  <canvas id="canvas" width="750" height="550" style="border: 1px solid black;  box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas>
  <a href='' id='txt' target="_blank">Click Me!!</a>
  <br />
  <img id="preview" />
</div>

Note that it did work without the background image because images served from the FileAPI are not subject to cross-origin restrictions.

Convert canvas into image with background image in html5

1 Answers1