Javascript 无法将映像添加到fabric js组
您好,我正在尝试将一个图像添加到一组圆圈和文本中,最后将该组添加到画布中,但无法显示图像。 谁能告诉我出了什么问题? 以下是片段Javascript 无法将映像添加到fabric js组,javascript,fabricjs,Javascript,Fabricjs,您好,我正在尝试将一个图像添加到一组圆圈和文本中,最后将该组添加到画布中,但无法显示图像。 谁能告诉我出了什么问题? 以下是片段 const canvas=new fabric.canvas('canvas'{ 选择:false }); const circle=新结构。circle({ 左:100,, 前100名, 半径:50, 填写:“#eef”, 原文:“中心”, 原创:“中心” }); const img=新图像(); img.src='/Content/assets/img/logo
const canvas=new fabric.canvas('canvas'{
选择:false
});
const circle=新结构。circle({
左:100,,
前100名,
半径:50,
填写:“#eef”,
原文:“中心”,
原创:“中心”
});
const img=新图像();
img.src='/Content/assets/img/logo.png';
const newImage=newfabric.Image(img{
左:圆圈。左+15,
顶部:圆圈,顶部,
perPixelTargetFind:对,
填充:2,
哈斯:错,
哈斯:错,
宽度:20,
身高:30,
原文:“中心”,
原文:'中心',
});
const text=new fabric.text('Hello World'{
左:圆圈,左,
顶部:圆圈,顶部,
fontFamily:“Arial”,
fontWeight:'粗体',
尺寸:10,
填充:“黑色”,
原文:“中心”,
原文:'中心',
});
const group=new fabric.group([circle,text,newImage]{
左:圆圈,左,
顶部:圆圈,顶部,
原文:“中心”,
原创:“中心”
});
canvas.add(组)代码>
因为您传递的是图像对象而不是源。这样做
fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
canvas.add(img1);
});
const canvas=new fabric.canvas('canvas'{
选择:false
});
fabric.Image.fromURL('http://placekitten.com/200/300,函数(img){
var img1=img.set({left:0,top:0,width:200,height:350});
canvas.add(img1);
});代码>
如何将该图像添加到组中?问题是,我的项目中的图像位于根文件夹下的“/assets/logo.png”位置,当我尝试使用您的方法时,画布上不会出现任何图像。issueJavascript无法查看您的服务器文件,因为它是客户端语言。您必须指定一个绝对URL。如果您在本地项目中,则可以使用localhost/assets/logo.png
@Xris