Ошибка при загрузке изображения в качестве шаблона в ткани JS

Question

Я работаю над приложением Fabric JS, я пытаюсь применить шаблон изображения с нажатием кнопки она работает не в Chrome, но получаю следующее сообщение об ошибке в Firefox:

Ошибка при загрузке в файл изображения

canvas = new fabric.Canvas('canvas'); 
 
s = '<svg width="150" height="150"><rect rx="20" ry="20" width="150" height="150" style="fill:#bbb;" /></svg>'; 
 
fabric.loadSVGFromString(s, function(objects, options) { 
 
    shape = fabric.util.groupSVGElements(objects, options); 
 
    shape.set({ 
 
    left: 200, 
 
    top: 200, 
 
    //scaleY: 2, 
 
    //scaleX: 2, 
 
    //fill: '#000', 
 
    centeredScaling: true 
 
    }); 
 
    canvas.add(shape).renderAll(); 
 
}); 
 

 
$('.pat').click(function() { 
 
    var src = $(this).css('background-image'); 
 
    console.log(src); 
 
    var src = src.replace('url(', '').replace(')', ''); 
 
    console.log(src); 
 
    fabric.util.loadImage(src, function(img) { 
 
    pattern = new fabric.Pattern({ 
 
     source: img, 
 
     repeat: 'repeat' 
 
    }); 
 
    if (shape instanceof fabric.PathGroup) { 
 
     shape.getObjects().forEach(function(o) { 
 
     o.fill = pattern; 
 
     }); 
 
    } else { 
 
     shape.fill = pattern; 
 
    } 
 
    canvas.renderAll(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<script src="../js/fabric.js"></script> 
 
<button style="background-image: url('http://s27.postimg.org/8yc1grpwz/pt1.jpg');" class="pat">pattern1</button> 
 
<button style="background-image: url('http://s27.postimg.org/n8lls969f/pt2.jpg');" class="pat">pattern2</button> 
 
<button style="background-image: url('http://s27.postimg.org/gd1d95bsj/pt4_copy.jpg');" class="pat">pattern3</button> 
 

 

 
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

JSFiddle Demo

Answer 1

Это не проблема с загрузкой изображения или проблемой fabricjs. Как вы видите из журнала консоли, вы передаете URL-адрес src, который содержит кавычки. Вы должны удалить их.

Я только что изменил это:

 var src = src.replace('url(', '').replace(')', ''); 

в этом:

var src = src.replace('url("', '').replace('")', ''); 

canvas = new fabric.Canvas('canvas'); 
 
s = '<svg width="150" height="150"><rect rx="20" ry="20" width="150" height="150" style="fill:#bbb;" /></svg>'; 
 
fabric.loadSVGFromString(s, function(objects, options) { 
 
    shape = fabric.util.groupSVGElements(objects, options); 
 
    shape.set({ 
 
    left: 5, 
 
    top: 5, 
 
    centeredScaling: true 
 
    }); 
 
    canvas.add(shape).renderAll(); 
 
}); 
 

 
$('.pat').click(function() { 
 
    var src = $(this).css('background-image'); 
 
    var src = src.replace('url("', '').replace('")', ''); 
 
    fabric.util.loadImage(src, function(img) { 
 
    pattern = new fabric.Pattern({ 
 
     source: img, 
 
     repeat: 'repeat' 
 
    }); 
 
    if (shape instanceof fabric.PathGroup) { 
 
     shape.getObjects().forEach(function(o) { 
 
     o.fill = pattern; 
 
     }); 
 
    } else { 
 
     shape.fill = pattern; 
 
    } 
 
    canvas.renderAll(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<script src="../js/fabric.js"></script> 
 
<button style="background-image: url('http://s27.postimg.org/8yc1grpwz/pt1.jpg');" class="pat">pattern1</button> 
 
<button style="background-image: url('http://s27.postimg.org/n8lls969f/pt2.jpg');" class="pat">pattern2</button> 
 
<button style="background-image: url('http://s27.postimg.org/gd1d95bsj/pt4_copy.jpg');" class="pat">pattern3</button> 
 

 

 
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>