请问companyEllipse绘制椭圆签章无法drawImage是怎么回事

[mumbaicat]

`//椭圆签章 companyEllipse: function (company,name,nameb,serNo,fType,cType) {

    //椭圆长轴半径
    var radiusX = 140;
    //短轴半径
    var radiusY = 90;
    this.commonMethod(cType,fType);
    var color = FXQ.baseConf.color;
    var font = FXQ.baseConf.font;

    //var canvas = document.getElementById('canvas');
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');

    canvas.width = 300;
    canvas.height = 300;

    canvas.width = 2 * radiusX + 5;
    canvas.height = 2 * radiusY + 5;


    writeFont(true,company);
    writeFont(false,serNo);
    writeTitle(name);
    writeTitleb(nameb);
    drawEllipse();
    drowImageToCanvas(context,0,0);

    // canvas对象绘制图片  
    function drowImageToCanvas(context,x,y) {
     var img = new Image();
     //指定图片的URL
     img.src = "/fg.png";
     //浏览器加载图片完毕后再绘制图片
     img.onload = function(){
         context.save();
         context.drawImage(img,0,0);
         context.restore(); 
     }; 
    }

    function writeFont(isTop,words) {

        var totalArcAng = 180;
        font = "20px "+font

        //字体长度
        if (!isTop) {
            totalArcAng = 60;
            font = "10px "+font
        }
        var fontTextLen = words.length;

        var radiusWidth = radiusX + context.lineWidth;
        var radiusHeight = radiusY + context.lineWidth;

        //从边线向中心的移动因子
        var minRat = 0.9;
        //起始角度
        var startAngle = isTop == true ? -90 -totalArcAng/2 : 90 - totalArcAng/2;
        var step = 0.5;
        var alCount = Math.ceil(totalArcAng / step) + 1;
        var angleArr = new Array(alCount);
        var arcLenArr = new Array(alCount);
        var num = 0;
        var accArcLen = 0;
        angleArr[num] = startAngle;
        arcLenArr[num] = accArcLen;
        num++;
        var angR = startAngle * Math.PI / 180;
        var lastX = radiusX * Math.cos(angR) + radiusWidth;
        var lastY = radiusY * Math.sin(angR) + radiusHeight;

        for (var i = startAngle + step; num < alCount; i+=step) {
            angR = i * Math.PI / 180;
            var x = radiusX * Math.cos(angR) + radiusWidth;
            var y = radiusY * Math.sin(angR) + radiusHeight;
            accArcLen += Math.sqrt((lastX - x) * (lastX - x) + (lastY - y) * (lastY - y));
            angleArr[num] = i;
            arcLenArr[num] = accArcLen;
            lastX = x;
            lastY = y;
            num++;
        }

        var arcPer = accArcLen / fontTextLen;
        for (var i = 0; i < fontTextLen; i++) {
            var arcL = i * arcPer + arcPer / 2;
            var ang = 0;

            for (var p = 0; p < arcLenArr.length - 1; p++) {
                if (arcLenArr[p] <= arcL && arcL <= arcLenArr[p + 1]) {
                    ang = (arcL >= ((arcLenArr[p] + arcLenArr[p + 1]) /2)) ? angleArr[p + 1] : angleArr[p];
                    break;
                }
            }
            angR = (ang * Math.PI / 180);
            var x = radiusX * Math.cos(angR) + radiusX;
            var y = radiusY * Math.sin(angR) + radiusY;
            var qxang = Math.atan2(radiusY * Math.cos(angR),-radiusX * Math.sin(angR));
            var fxang = qxang + Math.PI / 2;

            var subIndex = isTop == true ? i : fontTextLen - 1 -i;
            var c = words[subIndex];
            var w = 25; var h = 31;

            if (!isTop) {
                w = 2; h = 10;
            }

            x += (h * minRat) * Math.cos(fxang);
            y += (h * minRat) * Math.sin(fxang);
            if (isTop) {
                x += -w / 2 * Math.cos(qxang);
                y += -w / 2 * Math.sin(qxang);
            } else {
                x += w / 2 * Math.cos(qxang);
                y += w / 2 * Math.sin(qxang);
            }

            context.save()
            context.translate(x,y);
            if (isTop == true) {
                context.rotate((fxang * 180 / Math.PI - 90) * Math.PI / 180)
            } else {
                context.rotate((fxang * 180 / Math.PI + 180 -90)* Math.PI / 180)
            }
            context.translate(-x,-y)
            context.fillStyle = color;
            context.font = font;
            context.fillText(c,x,y);
            context.restore();
        }
    }

    function writeTitle(name) {
        context.fillStyle = color;
        context.font = '20px SimSun';
        context.textAlign = 'center';
        context.fillText(name,radiusX,radiusY+10);
        context.restore();
    }

    function writeTitleb(nameb) {
        context.fillStyle = color;
        context.font = '20px SimSun';
        context.textAlign = 'center';
        context.fillText(nameb,radiusX,radiusY+55);
        context.restore();
    }

    function drawEllipse() {
        context.ellipse(radiusX + context.lineWidth+1,radiusY + context.lineWidth+1,radiusX,radiusY,0,0,Math.PI*2);
        //背景透明
        context.fillStyle = "rgba(255, 255, 255, 0)";
        context.strokeStyle = color;
        context.lineWidth = 3;
        context.fill();
        context.stroke();
    }



    //返回图片base64
    return canvas.toDataURL();
},`

drowImageToCanvas函数，图片是存在的，加了代码没有效果，请问如何解决，感谢。

[niezhiliang]

请问你是想实现什么效果呢，我的代码是生成图片的base64，如果想要对图片进行保存的话 建议后端对base64进行保存操作。

[mumbaicat]

请问你是想实现什么效果呢，我的代码是生成图片的base64，如果想要对图片进行保存的话 建议后端对base64进行保存操作。

感谢您的回复，我的问题已经得以解决了。 我的意图想在您的代码上增加drawImage写入图片的步骤，但是因为图片还没 img.onload 加载好导致没有执行 drawImage 行代码时，就已经 return canvas.toDataURL(); 个人解决办法是不用 canvas.toDataUrl 到img标签里，而改用document.getElementById('canvas') 直接对canvas进行操作。最后还是得感谢您贡献的代码帮助我在项目业务上得到快速的解决。

[niezhiliang]

解决了就好 感谢你点亮的小星星