将画布转换为带有HTML5中背景图片的图片

Question

我实现了将画布转换为图像的功能，但是当我设置背景图像时，它将无法正常工作。 我在画布上使用Fabric js，但是每当设置背景图像时，画布就不会在图像中转换。 设置背景图像后，然后单击“我的点击”！ 最终的形象应该来了。 我有一个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脚本：

 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();
            };

Answer 1

正如Patrick Evans告诉您的那样，您遇到了跨域问题 。

幸运的是，您在问题中指出的图像是从某个域提供的，该域确实发送了要通过跨域使用的正确标题。

为此，您必须设置setBackgroundImage()方法的crossOrigin参数：

 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> 

请注意，它确实可以在没有背景图像的情况下工作，因为FileAPI提供的图像不受跨域限制。