画布上的图像在点击事件时消失

Question

我正在使用 Fabric.js 实现一个应用程序，该应用程序允许用户选择图像模板，然后在图像上写一些文本，然后导出图像。我尝试了初步实施。我遇到的问题是，使图像出现在画布中后，单击图像后图像消失了。

这是javascript：

$(document).ready(function(){
    console.log("entering the ad_man js file");

    canvas = new fabric.Canvas('c');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
    };
    img.src = 'http://ovtoaster.com/wp-content/uploads/2014/02/cc-logo.jpg';
    var textCharsInfo = function (textObj) {
        var results = { charDims: [], totalLength : 0 };
        if (textObj && textObj.text && textObj.text.length > 0) {
            var str = '';
            var prevWidth = 0;
            for (var i = 0, length = textObj.text.length; i < length; i++) {
                var c = textObj.text.charAt(i);
                str += c;
                var txtObjForCalc = new fabric.IText(str, { 
                    fontFamily: textObj.fontFamily,
                    fontWeight: textObj.fontWeight,
                    fontSize: textObj.fontSize,
                    left: 2000,
                    top: 2000,
                    useNative: true 
                });

                canvas.add(txtObjForCalc).renderAll();
                var charWidth = txtObjForCalc.width - prevWidth;
                prevWidth = txtObjForCalc.width;
                results.charDims.push({ width: charWidth, height: txtObjForCalc.height });
                canvas.remove(txtObjForCalc);
                txtObjForCalc = null;
            }
            results.totalLength = prevWidth;
        }

        return results;
    };


    var text = new fabric.IText("This is text that is curved along an arc.", { 
        fontFamily: 'Italianno',
        fontWeight: '',
        fontSize: 40,
        left: 250,
        top: 250,
        useNative: true 
    });
    canvas.add(text);
    canvas.renderAll();;
});

这是html部分：

<h1>Hello World test</h1>
<canvas id="c" width="400" height="400">test</canvas> 
<img src="http://ovtoaster.com/wp-content/uploads/2014/02/cc-logo.jpg" id="image_man"></img>

这里是JSFiddle。如何保留图像？

---

这是小提琴的更新版本，其中包含更多更改。我能够按照我想要的方式制作初始图片。现在在单击更改背景图像时，新图像也会消失。这是jsfiddle。

Answer 1

问题是您以本机样式将图像添加到画布中，当您使用此样式时，图像对象不会添加到织物画布中，当您单击绘制的文本时，织物会重绘所有添加到画布的形状，所以未添加的图像将消失。

以这种方式将图像添加到画布中

var imgInstance = new fabric.Image(img);
canvas.add(imgInstance);

代替原生样式

    ctx.drawImage(img,0,0);

DEMO