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

原创 2017年10月12日 11:27:44

       关于实现页面截图常用的几个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保存为pngjpegbmp等格式

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

将画布(canvas)图像保存成本地图片的方法

之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单。但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2015年03月16日 17:33
  • 4657

将html canvas里的图片保存到本地

将html canvas里的图片保存到本地当你想要这样做的时候: js直接操作保存 post back的保存 js直接操作保存ms给出了官方方案,参考以下: 在本地保存 canvas 图像 ...
  • zhaoyaoxing
  • zhaoyaoxing
  • 2015年03月26日 13:22
  • 3034

canvas导出为图片并用JS下载

1、从canvas中直接提取图片元数据 // 图片导出为 png 格式 var type = 'png'; var imgData = canvas.toDataURL(t...
  • Lingfeng928
  • Lingfeng928
  • 2017年01月06日 18:05
  • 3661

html2canvas.js 长按页面保存为图片的功能实现

  • 2017年10月09日 10:09
  • 30KB
  • 下载

Web开发之html2canvas 实现纯JS网页截图简单例子

代码库地址: https://github.com/niklasvh/html2canvas自己修改其中的 test.js (主要是其中的一些库的路径) 把test.js external文件夹 sr...
  • yxys01
  • yxys01
  • 2017年10月12日 17:22
  • 929

Web开发之html2canvas截图如何解决跨域的问题?

关于图片跨域的问题本人在使用过程中也遇到了,开始使用代理服务器解决了,但是感觉不太好, 后来偶尔中,在html2canvas源码中改了几段小代码终于把问题给解决了。function ImageCon...
  • yxys01
  • yxys01
  • 2017年10月12日 16:59
  • 839

canvas保存为data:image扩展功能的实现

【已知】   canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式,jpeg格式的现代浏览器基本也支持,但是支持的...
  • jyb2014
  • jyb2014
  • 2014年07月22日 18:07
  • 217

html2canvas.js截取网页保存为图片

*{ margin: 0; padding: 0;font:12px/1.5 "Microsoft YaHei",arial,simsun} img{ max-width:100%;} html,...
  • boyit0
  • boyit0
  • 2017年11月30日 15:00
  • 140

前端html2canvas实现html转图片(浏览器截图)

  • 2016年09月21日 10:30
  • 59KB
  • 下载

html2canvas 实现纯JS网页截图简单例子

代码库地址: https://github.com/niklasvh/html2canvas 自己修改其中的 test.js (主要是其中的一些库的路径) 把test.js external文件...
  • sqzhao
  • sqzhao
  • 2015年10月01日 00:18
  • 12252
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web开发之用canvas2image.js将canvas保存为图片(实现页面截图下载功能)
举报原因:
原因补充:

(最多只允许输入30个字)