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

来源：互联网发布：上证综合指数季度数据编辑：程序博客网时间：2024/04/26 19:49

关于实现页面截图常用的几个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中可以自己命名保存下来的图片名称

阅读全文

0 0