Web开发之用canvas2image.js将canvas保存为图片（实现页面截图下载功能）

关于实现页面截图常用的几个js插件库

canvas2image.js

html2canvas.js

convertImgToBase64.js

废话不多说，直接上demo代码

index.html：


<!doctype html>
<html>
<meta charset="utf-8" />
<script src="canvas2image.js"></script>
<style>.doc {width: 604px;margin: 0 auto;}canvas {display: block;border: 2px solid #888;}
</style>
<body>
<div class="doc"><canvas width="600" height="400" id="cvs"></canvas><div><p><button id="save">save</button> or <button id="convert">convert to</button> as: <select id="sel"><option value="png">png</option><option value="jpeg">jpeg</option><option value="bmp">bmp</option></select><br/>width : <input type="number" value="300" id="imgW" /><br/>height : <input type="number" value="200" id="imgH" /><br>fileName: <input type="text" placeholder="optional" id="imgFileName"></p></div><div id="imgs"></div>
</div>
<script>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;
</script>
</body>
</html>

如图所示

点击save可以将canvas保存为png，jpeg，bmp等格式

点击convert to 可以在该div下方新建一个img展示图片，图片大小可以自己在width、height中更改

fileName中可以自己命名保存下来的图片名称

Web开发之用canvas2image.js将canvas保存为图片（实现页面截图下载功能）相关推荐

js将canvas保存成图片并下载
<canvas id="canvas" width="400" height="400"></canvas> < ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
Swift Web 开发之 Vapor - 入门（一）
简介 Vapor 是一个基于纯 Swift 构建出的 Web 开发框架,目前可以运行在 macOS 和 Ubuntu ,用于构建出漂亮易用的网站或者 API 服务. 官方称是用的最多的 Swift w ...
18. 【移动Web开发之rem适配布局】
文章目录 [移动Web开发之rem适配布局]前端小抄(18) 一.rem单位 1.1 rem 单位二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2 ...
「学习笔记」移动Web开发之rem适配布局10
「学习笔记」移动Web开发之rem适配布局10 一.rem单位 1.1 rem 单位二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2.2.2 关键 ...
21. 【移动端Web开发之vw和vh布局】
文章目录 [移动端Web开发之vw和vh布局]前端小抄(21) 一.vw和vh 1.1 移动端布局 1.2 vw/vh是什么? 1.3 vw/vh怎么用? 1.4 vw注意事项 1.5 VSCode ...
17. 【移动Web开发之flex布局】
文章目录 [移动Web开发之flex布局]前端小抄(17) 一.flex布局体验 1.1 传统布局与flex布局 1.2 初体验二.flex布局原理 2.1 布局原理三.flex布局父项常见属性 ...
「学习笔记」移动Web开发之flex布局9
「学习笔记」移动Web开发之flex布局9 一.flex布局体验 1.1 传统布局与flex布局 1.2 初体验二.flex布局原理 2.1 布局原理三.flex布局父项常见属性 3.1 常见父项 ...
WEB开发之HTML与CSS够用即可-庞永旺-专题视频课程
WEB开发之HTML与CSS够用即可-113人已学习课程介绍讲解常用的HTML标签与CSS样式.这些常用的HTML标签与CSS样式都是本人多年从业经验的总结.只要熟练我总结的HTM ...

Web开发之用canvas2image.js将canvas保存为图片（实现页面截图下载功能）

index.html：

Web开发之用canvas2image.js将canvas保存为图片（实现页面截图下载功能）相关推荐

最新文章

热门文章