Question

我试图让用户使用客户端脚本来保存他们的kinecticjs创建。我尝试使用bytescout生成pdf，但我不认为它允许使用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 */

Answer 1

这个怎么样：

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

来自http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/

jquery允许用户下载kinecticjs'canvas'

1 个答案: