0

クライアント側のスクリプトを使用して、ユーザーがkinecticjsの作成を保存できるようにしようとしています。pdf を生成するために bytescout を試しましたが、kineticjs ステージを使用できるとは思いません。だから私は代替手段が必要だと思います。画像としてダウンロードできるようにしますか？しかし、JS/jQuery を使用することは可能ですか? または、phpを使用する必要がありますか？

HTML:

    <div class="Layout3_1" >                
        <div id="tag_canvas"></div>
    </div>
    <div id="save_tag"><input type="button" id="saveBtn" value="Save Tag"/></div>

kineticjs ステージ:

/* Set up the DEFAULT Plant tag */
    stage = new Kinetic.Stage({
        container: 'tag_canvas',
        width: stageWidth,
        height: stageHeight
    });

  layer = new Kinetic.Layer({
        width: stageWidth,
        height: stageHeight,
        scale: {x:scaleX, y:scaleY},
  });

    kinetic_common_name = new Kinetic.Text({
        //x: commonLeftIndent ,
        y: commonTopIndent ,
        //text: commonname,
        fontSize: commonFontSize,
        fontFamily: commonFont,
        fill: 'green',
        lineHeight:commonLineSpace,
        align: commonTextAlign,
        draggable: true,
    });

    kinetic_botanical_name = new Kinetic.Text({
        //x: latinLeftIndent ,
        y: latinTopIndent ,
        //text: latinname,
        fontSize: latinFontSize,
        fontFamily: latinFont,
        fill: 'green',
        lineHeight:latinLineSpace,
        align: latinTextAlign,
        draggable: true
    });

    var hibiscus_imageObj = new Image();
    hibiscus_imageObj.src = 'images/tag_templates/hibiscus_template.png';
  hibiscus_imageObj.onload = function() {
        hibiscus = new Kinetic.Image({
            x: 0,
            y: 0,
            image: hibiscus_imageObj,
    });
        layer.add(hibiscus);
        hibiscus.hide();
    };

    var sm_oval_imageObj = new Image();
    sm_oval_imageObj.src = 'images/tag_templates/small_oval_template.png';
  sm_oval_imageObj.onload = function() {
        sm_oval = new Kinetic.Image({
            x: 0,
            y: 0,
            image: sm_oval_imageObj,
    });
        layer.add(sm_oval);
        sm_oval.hide();
    };

    var xlg_oval_imageObj = new Image();
    xlg_oval_imageObj.src = 'images/tag_templates/xlarge_oval_template.png';
  xlg_oval_imageObj.onload = function() {
        xlg_oval = new Kinetic.Image({
            x: 0,
            y: 0,
            image: xlg_oval_imageObj,
    });
        layer.add(xlg_oval);
        xlg_oval.hide();
    };

    var lg_oval_imageObj = new Image();
  lg_oval_imageObj.onload = function() {
        lg_oval = new Kinetic.Image({
            x: 0,
            y: 0,
            image: lg_oval_imageObj,
    });

        layer.add(lg_oval);
        layer.add(kinetic_common_name);
        layer.add(kinetic_botanical_name);

        kinetic_common_name.setText(commonname);
        kinetic_botanical_name.setText(latinname);

        //13 represents dimension marks on right of template image
        commonStartX = (0 + ((lg_oval.getWidth()-13)/2)) - (kinetic_common_name.getTextWidth()/2); //center common text horizontal
        botanicalStartX = (0 + ((lg_oval.getWidth()-13)/2)) - (kinetic_botanical_name.getTextWidth()/2); //center common text horizontal


        kinetic_common_name.setX(commonStartX);
        kinetic_botanical_name.setX(botanicalStartX);

        stage.add(layer);

    };
    lg_oval_imageObj.src = 'images/tag_templates/large_oval_template.png';
        //kinetic_common_name.setText($("#Cname").val());
    //kinetic_common_name.setText(commonname);
  //layer.draw();

/* END Set up the DEFAULT Plant tag */
4

1 に答える 1

1

これはどうですか：

stage.toDataURL({
      callback: function(dataUrl) {
        window.open(dataUrl);
      }
    });

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/から

于 2013-04-16T11:38:33.947 に答える