【前端】p5.js建立的Canvas儲存到localStorage
// it should be stored in localStorage
function saveMyCanvas(e) {
console.log('Saving...')
// saveCanvas(canvas, dishName, 'png')
// this way worked!
var imgCanvas = document.getElementById('canvas'); // get the canvas created by p5js
var imageAsDataURL = imgCanvas.toDataURL("image/png");
localStorage. setItem('CHICKEN', imageAsDataURL);
myCanvas = localStorage.getItem("CHICKEN");
console.log(myCanvas);
}
先通過原生JS得到canvas
元素,然後再考慮用toDataURL
的方式儲存到localStorage
,在setup
裡canvas
只是一個指標,指向物件,但不是物件本身。
END.
相關推薦
【前端】p5.js建立的Canvas儲存到localStorage
// it should be stored in localStorage function saveMyCanvas(e) { console.log('Saving...') // saveCanvas(canvas, dishName, 'png') // this way
【前端】Vue.js經典開源項目匯總
查詢 可見 專業 codec ssa mark 高級 coffee init Vue.js經典開源項目匯總 原文鏈接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什麽? Vue.js(讀音 /vju?/, 類似
【前端】vue.js實現按鈕的動態綁定
case ctype html 們的 ast pre cal 防止 得到 vue.js實現按鈕的動態綁定 實現效果: 實現代碼以及註釋: <!DOCTYPE html> <html> <head> <title>按鈕
【前端】建立元素並插入到現有文件
// 建立元素 // div var newDiv = document.createElement('div') // 新增類名 newDiv.className = 'hello' // 新增id newDiv.id = 'hello1' // 設定屬性 newDiv.setA
【前端】js 在瀏覽器視窗飄來飄去的div
實現以下功能: 1.div自動飄來飄去 + 觸及視窗邊界反彈 基本思想就是在window.onload方法內使用setInterval()函式,用: var windowWidth = window.innerWidth; var windowHeight = window.in
【前端】利用Canvas給圖片新增水印,支援拖拽、編輯、縮放與刪除
利用Canvas給圖片新增水印,支援拖拽、編輯、縮放與刪除。 難點一: 如何在偽元素after“刪除按鈕“上新增點選事件。 通過滑鼠點選位置event中offsetX屬性獲得其偏離元素距離,與元素寬度做比較。若大於元素寬度,則點選在了偽元素上,否則點選到正常元
【前端】js+php實現圖片拖拽上傳
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽圖片上傳</title> </head> <body>
【前端】JS 實現 unicode 中文互轉
中文和 unicode 實現除了在伺服器端實現,javascript 同樣可以實現: // 轉為unicode 編碼 function encodeUnicode(str) { var res
【cocos2d-js系列問題】cocos2d-js建立幀動畫的兩種方法
不過在這之前,一定要先把圖片載入到記憶體當中去;其實你也可以不加,但是需要換另外一個函式就行; //將plist問價載入到記憶體當中 cc.spriteFrameCache.addSpriteFrames(res.play_plist); 第一種方法: 建立一個空的精靈
【自己的整理】node.js建立靜態路由以及Router建立路由
node.js路由的設定 靜態路由 首先作為基礎的建立一個靜態路由,是在express中最簡單的路由建立方法,這樣就可以訪問靜態路由下的任何一個存在的檔案。 先要建立一個js檔案,檔案命名隨便,比如我就把它叫做static.js,然後我們需要檢視路由是
【前端】利用qrcode.js生成二維碼
整體程式碼示例: <!DOCTYPE html> <html> <head> <
【前端知識體系-JS相關】10分鐘搞定JavaScript正則表示式高頻考點
1.正則表示式基礎 1.1 建立正則表示式 1.1.1 使用一個正則表示式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 呼叫RegExp物件的建構函式 const regex = new RegExp(pattern, [, flags]) 1.1.3
【前端】用jQuery實現瀑布流效果
scrollto title n) 個性 避免 ive gets type turn jQuery實現瀑布流效果 何為瀑布流: 瀑布流,又稱瀑布流式布局。是比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊並附加
【前端】JavaScript
sea 模仿 嘗試 sub word number 封裝 得到 整數 一、JavaScript概述 1.JavaScript的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名Script
【轉】用Python建立最簡單的web服務器
web服務 localhost 服務器 pos 根目錄 cal body -m -- 利用Python自帶的包可以建立簡單的web服務器。在DOS裏cd到準備做服務器根目錄的路徑下,輸入命令: python -m Web服務器模塊 [端口號,默認8000]
【前端】react學習階段總結,學習react、react-router與redux的這些事兒
行程 clas 目前 webpack body src 控制 return 體驗 前言 借用阮一峰的一句話:真正學會 React 是一個漫長的過程。 這句話在我接觸react深入以後,更有感觸了。整個react體系都是全新的,最初做簡單的應用,僅僅使用react-to
【前端】前端筆試題 [1]
func 循環引用 object meid 內核 hresult 分別是 存在 all 1. 請用div+css寫出文字水平垂直居中,圖片水平垂直居中的樣式及布局。2. 請用div+css寫出左側固定(width:200px),右側自適應的頁面布
【前端】強大的javascript原生選擇器querySelector 和 querySelectorAll
它的 color 通過 tor size 便是 進行 play tar querySelector 和 querySelectorAll 在傳統的 JavaScript 開發中,查找 DOM 往往是開發人員遇到的第一個頭疼的問題,原生的 JavaScript 所提供的
【前端】三個bug
1.5 nbsp 取數 -1 元素 spa asc 包括 解決 目錄 一、Array對象的indexOf() 二、使用jquery,clone()下拉框問題 三、jquery獲取獲取html5的data-*屬性 一、Array對象的indexOf()
【轉】使用js觸發事件
rda ctype rem odi scroll cancel script 事件 some 如果大家將一張網頁看成一個form的話,大致上就成了一個web form的模型。在win form 下要想手動觸發某一個對象的事件是很簡單的,只要發送一條消息即可達成。