Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/399.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 无法使用fabric.js动态更改图像_Javascript_Jquery_Canvas_Html5 Canvas_Fabricjs - Fatal编程技术网

Javascript 无法使用fabric.js动态更改图像

Javascript 无法使用fabric.js动态更改图像,javascript,jquery,canvas,html5-canvas,fabricjs,Javascript,Jquery,Canvas,Html5 Canvas,Fabricjs,我使用fabric.js在画布上放置了3个(最多5个)图像,现在我尝试用一个数组替换这些图像,该数组包含新图像的URL。最后,我生成图像输出,但由于图像是异步加载的,所以它们不会在输出(图像)中渲染。我已经寻找了这么多的解决方案,但都没有效果 这是我正在使用的代码: var canvas_virtual = new fabric.Canvas('virtual_canvas'); function GetOutput(){ var exist

我使用fabric.js在画布上放置了3个(最多5个)图像,现在我尝试用一个数组替换这些图像,该数组包含新图像的URL。最后,我生成图像输出,但由于图像是异步加载的,所以它们不会在输出(图像)中渲染。我已经寻找了这么多的解决方案,但都没有效果

这是我正在使用的代码:

      var canvas_virtual = new fabric.Canvas('virtual_canvas');
      function GetOutput(){
               var exist_objects = canvas.getObjects();


            for (var k = 0; k < exist_objects.length; k++) {
               var obj = fabric.util.object.clone(exist_objects[k]);
               if(obj.name.indexOf("img_icon") > -1){
                   fnAddImageSave(obj.top,obj.left,obj.id,obj.propertyname,obj.tempPreviewData,obj.nutrientId,listIcons[k],canvas_virtual,obj.height);
                }
            }
            canvas_virtual.renderAll();
            console.log(canvas_virtual.toDataURLWithMultiplier("image/jpeg", 1));
         }

我将图像从服务器带到HTML,然后使用fabricjs将这些图像添加到画布。它没有任何问题。下面是我使用的代码:

 imgElement = $("#add img[src$='/" + imgElement.defaultIcon.replace('\\', '/') + "']");
 $(imgElement[0]).attr('height', obj.height * obj.scaleY);
 var imgInstance = new fabric.Image(imgElement[0], {
                               "id": obj.id,
                               "name": obj.name,
                               "left": obj.left,
                               "top": obj.top,
                               "cornerSize": 5,
                               "propertyname": obj.propertyname,
                               "tempPreviewData": obj.tempPreviewData,
                               "nutrientId": obj.nutrientId
 });
canvas_virtual.add(imgInstance); 
canvas_virtual.renderAll();   
 imgElement = $("#add img[src$='/" + imgElement.defaultIcon.replace('\\', '/') + "']");
 $(imgElement[0]).attr('height', obj.height * obj.scaleY);
 var imgInstance = new fabric.Image(imgElement[0], {
                               "id": obj.id,
                               "name": obj.name,
                               "left": obj.left,
                               "top": obj.top,
                               "cornerSize": 5,
                               "propertyname": obj.propertyname,
                               "tempPreviewData": obj.tempPreviewData,
                               "nutrientId": obj.nutrientId
 });
canvas_virtual.add(imgInstance); 
canvas_virtual.renderAll();