25-Canvas对象的toDataURL()方法

3.5.3　Canvas对象的toDataURL()方法

如同本书在第1章中简单说明的那样，Canvas对象也包含一个名为toDataURL()的方法——可以返回代表画布图像数据的字符串。若没有参数的调用，的可以返回一个图像MIME类型image/png的字符串。如果将image/jpg作为一个参数，也可以设置第二个参数，用来代表图片的“质量/压缩”级别，数值范围为0.0～1.0。这里将使用toDataURL()将画布的图像数据输出到表单的元素，然后打开一个窗口显示动态的图像。这是一个显示功能是否有效的简单方法。</p> <p>首先，要为Text Arranger创建HTML中最后的两个表单控件。创建一个id为createImage Data的按钮：当单击按钮时，它将产生一个名为imageDataDisplay的 <textarea>元素；当单击按钮后，它将保存图像的文本数据。</p> <pre><code class="language-javascript"><input type="button" id="createImageData" value="Create Image Data"> <br> <br> <textarea id="imageDataDisplay" rows=10 cols=30></textarea></code></pre> <p>接下来，为createImageData按钮设置事件监听器。</p> <pre><code class="language-javascript">formElement = document.getElementById("createImageData"); formElement.addEventListener('click', createImageDataPressed, false);</code></pre> <p>然后，在createImageDataPressed() 事件处理器中，调用Canvas对象 （theCanvas）的toDataURL() 方法，将imageDataDisplay <textarea>的值设定为toDataURL()返回的数据。这时会弹出一个窗口，显示从画布创建的动态图像（见图3-11）。用户可以通过单击右键保存图像，就像保存其他HTML页面中的图像那样。是不是很酷？</p> <pre><code class="language-javascript">function createImageDataPressed(e) { 　　　var imageDataDisplay = document.getElementById('imageDataDisplay'); 　　　imageDataDisplay.value = theCanvas.toDataURL(); 　　　window.open(imageDataDisplay.value,"canvasImage","left=0,top=0,width=" + 　　　　　theCanvas.width + ",height=" + theCanvas.height + 　　　　　",toolbar=0,resizable=0"); 　 }</code></pre> <p><img src="../images/55.png" alt="55.png" /></p> <center class="my_markdown"><b class="my_markdown">图3-11　使用toDataURL()输出Canvas图像</b></center> <blockquote> <p><strong>SECURITY_ERR: DOM Exception 18</strong> 在一些Web浏览器中，例如Google Chrome，当显示图像（如例3-3中的图案填充类型）并尝试输出画布的时候，有可能会遇到错误（SECURITY_ERR: DOM Exception 18）。这通常，这是因为浏览器本地执行网页而造成的（加载自文件系统）。一般情况下，这些错误可以通过从服务器端加载HTML页面来清除——远程或在本地机器上均可。</p> </blockquote></p><div class="pagenavitop"><a href="/show/book_series/8-3-24.html">Previous 上一篇</a><a href="/books/series/136">本节目录</a> <a href="/show/book_series/8-3-26.html">Next 下一篇</a></div><!--/sse--> <!-- Start Font --> </div></div></div></div></div><!--内容结束--> <div class="comments-template"> <div class="footer container" id="footer" > <div class="copyright"> <div>本站为非盈利网站，所有演示作品均由网友提供上传，如无意中有侵犯您的版权，请联系删除。</div> Copyright © <a href="/sitemap.xml" title="SiteMap网站地图" target="_blank">SiteMap</a> </div> </div> </div><!--body-content--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="//gitee.com/sheyi/bjimages/raw/master/_higrid_net/include/assets/novel/jquery.cookie.js"></script> <script type="text/javascript" src="//gitee.com/sheyi/bjimages/raw/master/_higrid_net/include/assets/novel/user.js"></script> <script type="text/javascript"> var next_page = ""; var back_page = ""; document.onkeydown = function(evt){ var e = window.event || evt; if (e.keyCode == 39) location.href = next_page; if (e.keyCode == 37) location.href = back_page; } </script> <script type="text/javascript"> //返回顶端 (function() { var $backToTopTxt = "返回顶部", $backToTopEle = $('<span id="gotopbtn"></span>').appendTo($("body")) .attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })(); </script> <script charset="UTF-8" id="LA_COLLECT" src="https://sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id:"3EupOVLwrHiNdmIe",ck:"3EupOVLwrHiNdmIe"})</script></body> </html><!-- 14.634847640991 -->