2. 程式人生 > >Web開發之用canvas2image.js將canvas儲存為圖片（實現頁面截圖下載功能）

Web開發之用canvas2image.js將canvas儲存為圖片（實現頁面截圖下載功能）

阿新 • • 發佈：2019-01-02
var canvas, ctx, bMouseIsDown = false, iLastX, iLastY, $save, $imgs, $convert, $imgW, $imgH, $sel; function init () { canvas = document.getElementById('cvs'); ctx = canvas.getContext('2d'); $save = document.getElementById('save'); $convert = document.getElementById('convert'
); $sel = document.getElementById('sel'); $imgs = document.getElementById('imgs'); $imgW = document.getElementById('imgW'); $imgH = document.getElementById('imgH'); $imgFileName =document.getElementById('imgFileName'); bind(); draw(); } function
bind () { canvas.onmousedown = function(e) { bMouseIsDown = true; iLastX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); } canvas.onmouseup = function
() { bMouseIsDown = false; iLastX = -1; iLastY = -1; } canvas.onmousemove = function(e) { if (bMouseIsDown) { var iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); var iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); ctx.moveTo(iLastX, iLastY); ctx.lineTo(iX, iY); ctx.stroke(); iLastX = iX; iLastY = iY; } }; $save.onclick = function (e) { var type = $sel.value, w = $imgW.value, h = $imgH.value; f = $imgFileName.value; Canvas2Image.saveAsImage(canvas, w, h, type,f); } $convert.onclick = function (e) { var type = $sel.value, w = $imgW.value, h = $imgH.value; $imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type)) } } function draw () { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 600, 400); ctx.fillStyle = 'red'; ctx.fillRect(100, 100, 50, 50); } onload = init;

相關推薦

Web開發之用canvas2image.js將canvas儲存為圖片（實現頁面截圖下載功能）

var canvas, ctx, bMouseIsDown = false, iLastX, iLastY, $save, $imgs, $convert, $imgW, $imgH, $sel; function init () {

如何使用js將canvas儲存為圖片檔案，並且可以自定義檔名

1、從canvas中直接提取圖片元資料 // 圖片匯出為 png 格式 var type = 'png'; var imgData = canvas.toDataURL(type); 上面的程式碼得到的資料格式為：data:image/p

Java——Web開發之MVC設計模式的學生資訊管理系統（二）

為什麼這個標題為“（二）”，其實是對於上一個特別簡單學生資訊管理系統裡功能的完善。 所謂的“（一）”在這：學生資訊管理系統（一） 系統實現的功能： 實現新增學生 顯示查詢到的學生 刪除學生 更新學生資訊 模糊查詢符合相關資訊的學生

JS將html生成為圖片並下載（適用於大多數瀏覽器，包含手機瀏覽器等（需配合後臺處理））(筆記)

（1）html程式碼 <div id="id="content""> //此處放置需要生成圖片的程式碼 <div class="order_payCon"> <div class="submit_pay_success"

將html2canvas生成的canvas儲存為圖片

想要做網頁截圖儲存或者是將頁面的某些html元素儲存為圖片的話，常用的外掛就是html2canvas。外掛的使用本身很簡單，這裡說的是如何將其生成的canvas儲存為圖片。 直接看程式碼，簡潔靠譜我還親自幫你實踐了。 let oCard = document.querySelecto

js將html生成為圖片，並儲存在本地

html生成圖片的方式有很多種，有的需要下載安裝外掛，如phantomjs 。顯得未免麻煩了些，有的又是通過後臺來實現的，但個人感覺沒必要做這種互動，也沒必要在服務端生成這些零時檔案，那麼問題來了，有沒有什麼方法，能直接在頁面生成圖片然後儲存在本地呢，答案是肯定的。在這裡我為

js將html儲存成圖片，pdf

  <script src="${root!}/static/js/html2canvas.js"></script>     <script src="${root!}/static/js/jspdf.debug.js"></scr

使用html2canvas.js實現頁面截圖並顯示或上傳

　　最近寫專案有用到html2canvas.js，可以實現頁面的截圖功能，但遭遇了許多的坑，特此寫一篇隨筆記錄一下。 　　在使用html2canvas時可能會遇到諸如只能擷取視覺化介面、截圖沒有背景色、svg標籤無法擷取等問題，下面詳細的說明一下。 一、匯入html2canvas.js 　　這個不需要多

html2canvas 將網頁儲存為圖片

最近做資料視覺化專案，需要用到截圖功能，在網上搜了一圈，發現 html2canvas 不錯，奈於沒用過，只能各種搜，最後發現下面這篇 通俗易懂的 文章： scale：是用來調整生成圖片螢幕解析度的，其實設定成1再iphone上生成的圖片清晰度沒啥問題，但是再有些android手機

PhantomJS將網頁儲存為圖片

下載phantomjs後解壓就可以使用。phantomjs可以在頁面渲染完成後將頁面儲存為圖片，而無需顯示頁面。 phantomjs 需要引入webpage模組，通過page.open()開啟頁面。 window .setTimeout() 等待頁面渲染

微信瀏覽器將html儲存為圖片並儲存

需求:將含有二維碼的html轉化成圖片並儲存 思路: 1.將html頁面轉化成圖片需要使用H5中canvas（畫布）功能，需要引入js庫: html2canvas.js canvas2image.js jquery.min.js（必須要） qrcode.min.j

使用html2canvas.js實現頁面截圖

由於最近專案需求，需要實現html頁面截圖，經過查資料，找到了這個東東html2canvas，剛開始截出來的圖片，空白、模糊、圖片不完整，各種問題，但幸好有各路大神的見解，把問題解決了，以下是我寫的一個demo，僅供大家參考哦 1、html頁面引入兩個js，html2ca

html2canvas.js擷取網頁儲存為圖片

<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> &l

matlab如何將矩陣儲存為圖片

一個簡單方法： imwrite(mat2gray(matrix), 'matrix.tif'); 不管matrix原先是double或者uint8型別，資料均被擴充套件到0-255的範圍。好處是開啟圖片後就是需要的效果，缺點是再次load該矩陣時，值不反應原來的數值，而是0

在WPF中把Canvas儲存為圖片，文字檔案，xps檔案

由於wpf的UI使用xaml來表達的，所以我們們可利用這個優點，把WPF中的xaml元素另存為各樣的檔案，在很多時候我們都不須要這樣的操作。把xaml儲存為圖片、字串、XPS等等。這裡我寫了一些方法，以供大家參考.。 注意：以下儲存操作前，一定要確保引數中的canvas

移動WEB開發之JS內置touch事件[轉]

調用 位置 .com 構造 turn listener 附件 cli 瀏覽器 iOS上的Safari也支持click 和mouseover等傳統的交互事件，只是不推薦在iOS的瀏覽器應用上使用click和mouseover，因為這兩個事件是為了支持鼠標點擊而設計 出來的。

[node 工具 ] 用 Node.js 將 bugzilla 上的 bug 列表導入到 excel 表格在線版本之一（ web 端）

oct node img please utf save smis charset nim 用 Node.js 將 bugzilla 上的 bug 列表導入到 excel 表格在線版本之一（ server 端） <!DOCTYPE html>

Web開發之html2canvas 實現純JS網頁截圖簡單例子

       自己修改其中的 test.js （主要是其中的一些庫的路徑） 把test.js external資料夾 src資料夾 放在同一目錄下 var h2cSelector, h2cOptions; (function(document,

移動web開發之像素和DPR

javascript element 英語單詞 計算機 web開發 定義　　像素，又稱畫素，是圖像顯示的基本單位，譯自英文“pixel”，pix是英語單詞picture的常用簡寫，加上英語單詞“元素”element，就得到pixel，故“像素”表示“圖像元素”之意，有時亦被稱為pel(pi

web開發之菜鳥的代碼規範

好的編碼 ray function 指定 參數說明 原則 特殊 第一個 約定 筆者菜鳥裏最不會飛的那個,所以這些基礎的習慣都沒養成，正好抽時間特意做個筆記以方便自己規範代碼, 有興趣的大佬多多指點. 養成好的編碼習慣收益良多, 總結下編碼時應註意的細節《借鑒高程裏代碼約束》