使用toDataURL實作將HTML5 Canvas的內容儲存為圖片-H5教程-PHP中文網

首頁

web前端

H5教程

使用toDataURL實作將HTML5 Canvas的內容儲存為圖片

不言

Jun 22, 2018 pm 02:33 PM

canvas圖片

將HTML5 Canvas的內容保存為圖片主要思想是藉助Canvas自己的API - toDataURL()來實現，具體實現如下，感興趣的朋友可以參考下哈，希望對你有所幫助主要想法是藉助Canvas自己的API - toDataURL()來實現，整個實作
HTML JavaScript的程式碼很簡單。

<html> 
<meta http-equiv="X-UA-Compatible" content="chrome=1"> 
<head> 
<script> 
window.onload = function() { 
draw(); 
var saveButton = document.getElementById("saveImageBtn"); 
bindButtonEvent(saveButton, "click", saveImageInfo); 
var dlButton = document.getElementById("downloadImageBtn"); 
bindButtonEvent(dlButton, "click", saveAsLocalImage); 
}; 
function draw(){ 
var canvas = document.getElementById("thecanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "rgba(125, 46, 138, 0.5)"; 
ctx.fillRect(25,25,100,100); 
ctx.fillStyle = "rgba( 0, 146, 38, 0.5)"; 
ctx.fillRect(58, 74, 125, 100); 
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color 
ctx.fillText("Gloomyfish - Demo", 50, 50); 
} 
function bindButtonEvent(element, type, handler) 
{ 
if(element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else { 
element.attachEvent(&#39;on&#39;+type, handler); 
} 
} 
function saveImageInfo () 
{ 
var mycanvas = document.getElementById("thecanvas"); 
var image = mycanvas.toDataURL("image/png"); 
var w=window.open(&#39;about:blank&#39;,&#39;image from canvas&#39;); 
w.document.write("<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/009/09822df1bec8d8201f1bd23fd41fa44a-0.jpg?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;"+image+"&#39; alt=&#39;from canvas&#39;/>"); 
} 
function saveAsLocalImage () { 
var myCanvas = document.getElementById("thecanvas"); 
// here is the most important part because if you dont replace you will get a DOM 18 exception. 
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png"); 
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
window.location.href=image; // it will save locally 
} 
</script> 
</head> 
<body bgcolor="#E6E6FA"> 
<p> 
<canvas width=200 height=200 id="thecanvas"></canvas> 
<button id="saveImageBtn">Save Image</button> 
<button id="downloadImageBtn">Download Image</button> 
</p> 
</body> 
</html>

運行效果如下：

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於HTML5 Canvas的事件處理

angularJS結合canvas畫圖的實作

以上是使用toDataURL實作將HTML5 Canvas的內容儲存為圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。