原生js基于canvas实现一个简单的前端截图工具代码实例

这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

先看效果

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
      }
      .clip-img-w{
        position: relative;
        width: 100%;
        height: 100%;
        font-size: 0;
      }
      .clip-img-w img{
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .clip-img-w canvas{
        position: absolute;
        left: 0;
        top: 0;
      }
      .clip-img-w #clipcanvas{
        z-index: 2;
      }
      .clip-img-w #drawcanvas{
        background: #fff;
        z-index: 1;
      }
      #img{
        display: block;
        margin: 0 auto;
      }
      .box-c{
        width: 400px;
        height: 200px;
        border: 1px solid #F35252;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div class="box-c">
      <div class="clip-img-w" id="clip-img-w">
        <canvas id="drawcanvas" ></canvas>
        <canvas id="clipcanvas" ></canvas>
      </div>
    </div>

    <!-- 结果 -->
    <img src="" id="img">
  </body>
  <script type="text/javascript">
    var img = document.getElementById("img");
    var url = 'http://img.muchengfeng.cn/FvC7i-GkXYoHE7kGFlNfj7xEzvIQ';

    var wrap = document.getElementById("clip-img-w");
    var width = wrap.offsetWidth;
    var height = wrap.offsetHeight;

    var clipcanvas = document.getElementById("clipcanvas");
    var drawcanvas = document.getElementById("drawcanvas");
    clipcanvas.width = width;
    clipcanvas.height = height;
    drawcanvas.width = width;
    drawcanvas.height = height;

    var clipCtx = drawcanvas.getContext("2d");
    var clipImg = document.createElement("img");
    clipImg.crossOrigin = "anonymous";
    clipImg.src = url;
    var timg = clipImg.cloneNode();
    wrap.appendChild(clipImg);
    clipImg.onload = function(){
      var x = Math.floor((width - this.width)/2);
      var y = Math.floor((height - this.height)/2);
      clipCtx.drawImage(this,0,0,timg.width,timg.height,x,y,this.width,this.height);
    }

    var ctx = clipcanvas.getContext("2d");
    ctx.fillStyle = 'rgba(0,0,0,0.6)';
    ctx.strokeStyle="green";
    var start = null;
    var clipArea = {};//裁剪范围

    clipcanvas.onmousedown = function(e){
      start = {
        x:e.offsetX,
        y:e.offsetY
      };
    }
    clipcanvas.onmousemove = function(e){
      if(start){
        fill(start.x,start.y,e.offsetX-start.x,e.offsetY-start.y)
      }
    }
    document.addEventListener("mouseup",function(){
      if(start){
        start = null;
        var url = startClip(clipArea);
        img.src= url;
      }
    })
    function fill(x,y,w,h){
      ctx.clearRect(0,0,width,height);
      ctx.beginPath();
      //遮罩层
      ctx.globalCompositeOperation = "source-over";
      ctx.fillRect(0,0,width,height);
      //画框
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillRect(x,y,w,h);
      //描边
      ctx.globalCompositeOperation = "source-over";
      ctx.moveTo(x,y);
      ctx.lineTo(x+w,y);
      ctx.lineTo(x+w,y+h);
      ctx.lineTo(x,y+h);
      ctx.lineTo(x,y);
      ctx.stroke();
      ctx.closePath();
      clipArea = {
        x,
        y,
        w,
        h
      };
    }
    function startClip(area){
      var canvas = document.createElement("canvas");
      canvas.width = area.w;
      canvas.height = area.h;

      var data = clipCtx.getImageData(area.x,area.y,area.w,area.h);

      var context = canvas.getContext("2d");
      context.putImageData(data,0,0);
      return canvas.toDataURL("image/png");
    }
  </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-09-09

js实现截图保存图片功能的代码示例

前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图.这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传的服务器上去).我这个主要就解决这个批量的人力的优化.好,废话不多说了.直接上逻辑和代码.' 这个问题的解决方案:html to canvas to png. 目前有一个这样的插件: html2canvas, html2canvas($targetElem, { useCORS: true, onrendered:

JavaScript实现网页截图功能

使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:

JS打开摄像头并截图上传示例

直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器,将canvas中的内容转为base64格式上传,后端(PHP)通过file_put_contents将其转为图片 要注意的是,在chrome以外的浏览器中,使用摄像头或多或少会出现一些问题,可能也是老问题了,所以以

JS中使用cavas截图网页并解决跨域及模糊问题

前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. 我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/html2canvas.js"></scrip

java利用phantomjs进行截图实例教程

前言 最近工作中遇到一个需求,需要实现截图功能,断断续续查找资料.验证不同的实现方法终于算基本搞定了页面截图,因为中间过程曲折花费较多时间,分享出来帮助大家快速实现截图 为什么选用phantomjs进行截图 截图可以实现的方式有很多,比如: selenium HtmlUnit Html2Image...and so on但是这些实现的截图效果都不好.selenium只能实现截屏,不能截取整个页面,而HtmlUnit.Html2Image对js的支持效果并不好,截下来的图会有很多空白.phanto

JS实现div模块的截图并下载功能

当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码 首先我们需要引入2个js文件: <script type="text/javascript" src="js/html2canvas.js"></script> <script type="text/javascript" src="js/jquery-1.12.3.min.js">

JavaScript+html5 canvas实现本地截图教程

最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

JavaScript+html5 canvas制作的百花齐放效果完整实例

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

JavaScript+html5 canvas制作色彩斑斓的正方形效果

本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t

JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

JavaScript+html5 canvas绘制的小人效果

本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit

JavaScript+html5 canvas绘制渐变区域完整实例

本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p

JavaScript+html5 canvas制作的圆中圆效果实例

本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar

JavaScript html5 canvas绘制时钟效果

本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

JavaScript+HTML5 canvas实现放大镜效果完整示例

本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas放大镜</title> <style> #copycanvas { border: 1px