使用sketch.js我想下载更多生成的数据

当我按下载键时，不会下载当前的报价。有没有办法改变这个？我试着玩弄“数据”标签，但没有任何工作。使用sketch.js我想下载更多生成的数据

下面是代码

<title>SNUGGLETOOTH</title> 

</head> 

<body> 

    <nav> 

     <div id="SketchTools"> 
    <!-- Basic tools --> 
    <a href="#SketchPad" data-color="#000000" title="Black"><img src="img/black_icon.png" alt="Black"/></a> 
    <a href="#SketchPad" data-color="#ff0000" title="Red"><img src="img/red_icon.png" alt="Red"/></a> 
    <a href="#SketchPad" data-color="#00ff00" title="Green"><img src="img/green_icon.png" alt="Green"/></a> 
    <a href="#SketchPad" data-color="#0000ff" title="Blue"><img src="img/blue_icon.png" alt="Blue"/></a> 
    <a href="#SketchPad" data-color="#ffff00" title="Yellow"><img src="img/yellow_icon.png" alt="Yellow"/></a> 
    <a href="#SketchPad" data-color="#00ffff" title="Cyan"><img src="img/cyan_icon.png" alt="Cyan"/></a> 

    <!-- Advanced colors --> 
    <a href="#SketchPad" data-color="#e74c3c" title="Alizarin"><img src="img/alizarin_icon.png" alt="Alizarin"/></a> 
    <a href="#SketchPad" data-color="#c0392b" title="Pomegrante"><img src="img/pomegrante_icon.png" alt="Pomegrante"/></a> 
    <a href="#SketchPad" data-color="#2ecc71" title="Emerald"><img src="img/emerald_icon.png" alt="Emerald"/></a> 
    <a href="#SketchPad" data-color="#1abc9c" title="Torquoise"><img src="img/torquoise_icon.png" alt="Torquoise"/></a> 
    <a href="#SketchPad" data-color="#3498db" title="Peter River"><img src="img/peterriver_icon.png" alt="Peter River"/></a> 
    <a href="#SketchPad" data-color="#9b59b6" title="Amethyst"><img src="img/amethyst_icon.png" alt="Amethyst"/></a> 
    <a href="#SketchPad" data-color="#f1c40f" title="Sun Flower"><img src="img/sunflower_icon.png" alt="Sun Flower"/></a> 
    <a href="#SketchPad" data-color="#f39c12" title="Orange"><img src="img/orange_icon.png" alt="Orange"/></a> 

    <a href="#SketchPad" data-color="#ecf0f1" title="Clouds"><img src="img/clouds_icon.png" alt="Clouds"/></a> 
    <a href="#SketchPad" data-color="#bdc3c7" title="Silver"><img src="img/silver_icon.png" alt="Silver"/></a> 
    <a href="#SketchPad" data-color="#7f8c8d" title="Asbestos"><img src="img/asbestos_icon.png" alt="Asbestos"/></a> 
    <a href="#SketchPad" data-color="#34495e" title="Wet Asphalt"><img src="img/wetasphalt_icon.png" alt="Wet Asphalt"/></a> 
    </br> <a href="#SketchPad" data-color="#ffffff" title="Eraser"><img src="img/eraser_icon.png" alt="Eraser"/></a> 

    <!-- Size options --> 
    <a href="#SketchPad" data-size="1"><img src="img/pencil_icon.png" alt="Pencil"/></a> 
    <a href="#SketchPad" data-size="3"><img src="img/pen_icon.png" alt="Pen"/></a> 
    <a href="#SketchPad" data-size="5"><img src="img/stick_icon.png" alt="Stick"/></a> 
    <a href="#SketchPad" data-size="9"><img src="img/smallbrush_icon.png" alt="Small brush"/></a> 
    <a href="#SketchPad" data-size="15"><img src="img/mediumbrush_icon.png" alt="Medium brush"/></a> 
    <a href="#SketchPad" data-size="50"><img src="img/bigbrush_icon.png" alt="Big brush"/></a> 
    <a href="#SketchPad" data-size="90"><img src="img/bucket_icon.png" alt="Huge bucket"/></a> 

    <a href="#SketchPad" data-download='png' id="DownloadPng">Download</a> 
    <br/> 
    </div> 
     <div class="links"> 
     <ul> 
      <li><img src="ficon.png" alt="Facebook"></li> 
      <li><img src="igramicon.png" alt="Instagram"></li> 
      <li><img src="picon.png" alt="Pinterest"></li> 
      <li><img src="mcicon.png" alt="Mixcloud"></li> 
      <li><img src="twicon.png" alt="Twitter"></li> 
     </ul> 
    </div> 

    <div class="message"> 

     <div data id="quote"></div> 
    <script> 
    (function() { 
     var quotes = [ 
     { text: "Snuggletooth likes pancakes"}, 
     { text: "Would you like Snuggletooth to tuck you in?"}, 
     { text: " Snuggletooth loves you"}, 
     { text: "Snuggletooth is here for you"}, 
     { text: "Did you know that Snuggletooth </br>can be in 2 places at once?"}, 
     { text: "Heyyyy!<br> I was just thinking about you </br>Love Snuggletooth" }, 
     { text: "Wanna Sandwich??</br>xSnuggletooth"}, 
     { text: "Want some breakfast???</br> ;) Snuggletooth"}, 
     { text: "Snuggletooth-a-riffic!!!"},  
     { text: "Snuggletooth makes great popcorn!"}, 
     { text: "Come over to Snuggletooth's! He makes a great guacamole!"}, 
     { text: "Snuggletooth likes his bubblebaths to smell like bubblegum"}, 
     { text: "Snuggletooth wants to know what are you up to later?"}, 
     { text: "Snuggletooth-a-licious!!!"}, 
     ]; 
     var quote = quotes[Math.floor(Math.random() * quotes.length)]; 
     document.getElementById("quote").innerHTML = 
     '<p>' + quote.text + '</p>' + 
     '' + ''; 
    })(); 
    </script> 

    </div> 
    </nav> 
    <canvas id="SketchPad" width="1125" height="600"> 

    </canvas> 
    </div> 
    <script type="text/javascript"> 
    $(function() { 
     $('#SketchPad').sketch(); 
    }); 
    </script>

来源

2015-06-27 reivax7

是什么问题？，预期结果？ – guest271314

现在，当我单击下载按钮时，除了“消息”div中的内容外，我无法弄清楚如何复制以及使用sketch.js – reivax7

的图形。未尝试sketch.js。可以创建stacksnippets，jsfiddle http://jsfiddle.net来演示吗？是否需要用'.message'文本设置'canvas'？ – guest271314

尝试利用window.URL.createObjectURL，还加入style元件导出的ObjectURL。见Drawing DOM objects into a canvas

$(function() { 
    $('#SketchPad').sketch(); 
    $("#DownloadPng").on("click", function(e) { 
     e.preventDefault(); 

    var canvas = document.getElementById('SketchPad'); 
    var ctx = canvas.getContext('2d'); 
    var style = $("style"); 

    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="1125" height="600">' 
     + '<foreignObject width="100%" height="100%">' 
     + '<div xmlns="http://www.w3.org/1999/xhtml">' 
     + $(".message")[0].outerHTML 
     + '</div>' 
     + '<style xmlns="http://www.w3.org/1999/xhtml">' 
     + style[0].innerHTML + '</style>' 
     + '</foreignObject>' 
     + '</svg>'; 

    var DOMURL = window.URL || window.webkitURL || window; 
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); 
    var url = DOMURL.createObjectURL(svg); 
    var popup = window.open(url, "popup") 

    }) 
});

的jsfiddle http://jsfiddle.net/e1ovm9mn/1/

来源

2015-06-27 21:10:34 guest271314

感谢您的努力，但它不工作，但没有任何东西被导出了。但你确实给了我一些其他的想法去尝试和寻找。起初我在想，也许我可以在html的某个地方使用标签。但是现在我开始更加注意JS的使用了 – reivax7

@ reivax7 _“再也没有任何东西被导出了”__ popup不会在http://jsfiddle.net/e1ovm9mn/1/的新窗口打开。，那里？出现在这里用'objectURL''svg'打开新选项卡。也可以将'url'转换为'data URI'而不是objectURL – guest271314

@ reivax7替换objectURL的'data URI' http://jsfiddle.net/e1ovm9mn/2/ – guest271314

使用sketch.js我想下载更多生成的数据

回答

相关问题