xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 必嬴亚洲:canvas从圆开始,canvas实现本地截图教

必嬴亚洲:canvas从圆开始,canvas实现本地截图教

发布时间:2019-05-11 10:28编辑:计算机尝试浏览(121)

    JS截图(html2canvas)

    • 引入js

    1  <script type="text/javascript" src="js/html2canvas.js"></script>
    2  <script type="text/javascript" src="js/jquery2.2.4.min.js"></script>
    

    • 截图操作

     1  <script type="text/javascript">
     2      $(document).ready(function () {
     3          
     4              document.querySelector('.btn').onclick = function(){
     5                  html2canvas(document.querySelector("#targetDom")).then(function (canvas) {
     6                      //获取截取图片路径
     7                      var base64Url = canvas.toDataURL('image/png');
     8                      //存入页面指定位置
     9                      document.getElementById("screenShotImg").src = base64Url;                     
    10                     //后台操作处理
    11                      var base64 = "<img src="   base64Url   " />"                     
    12                  });
    13              }         
    14      }); 
    15  
    16  </script>
    

    • html页面

    1   <!--截取区域(通过Id控制) -->
    2     <div id="targetDom">
    3         <img id="picture" src="img/magic.jpg">
    4     </div>
    5     
    6     <!-- 存放截图 -->
    7     <img id="screenShotImg">
    8     
    9     <div class="btn">点击截图</div>
    

    • css样式

     1 <style type="text/css">
     2 .btn {
     3     width: 6rem;
     4     height: 2rem;
     5     line-height: 2rem;
     6     text-align: center;
     7     color: #fff;
     8     background: red;
     9 }
    10 </style>
    

    • 演示效果

    必嬴亚洲 1

    必嬴亚洲 2

     

    • 所需控件下载:    gd4t

    • html2canvas详解:

    JavaScript html5 canvas完结本地截图教程,html五canvas

    前不久一时光通晓了下html五的各API,开采新浪和讯的头像设置是利用canvas完成截图的,加之当月理解了下html5的File API使用File API 之FileReader实现公文上传《JavaScript File API文件上传预览》,更加的认为html伍有趣了,想着也蓄势待发写写那功用权当学习canvas吧。
    上面奉上本人要好写的3个demo,代码写得比较少,好多细节不会管理。假设有不伏贴的地点恳请指教,感激啦 ^_必嬴亚洲:canvas从圆开始,canvas实现本地截图教程。^ ^_^
    必嬴亚洲,功用完毕步奏:

    • 一、获取文件,读取文件并生成url
    • 贰、遵照容器的轻重使用canvas绘制图片
    • 3、使用canvas绘制遮罩层
    • 四、使用canvas绘制裁剪后的图形
    • 伍、拖动裁剪框,重新裁剪图片

    PS:因为是先把demo写好再写那篇小说的,所以分段贴的代码是直接从代码里面一段段拷的,要留心this对象喔
    第二步:获取文件,读取文件并生成url
    在这里本身是选择html五里面包车型客车file api管理地方文件上传的,因为这么能够不须要把图片上传出服务器,再由服务器重返图片地址来做预览,详细请看:使用File API 之FileReader落成文件上传

    document.getElementById('post_file').onchange = function() {
      var fileList = this.files[0];
      var oFReader = new FileReader();
      oFReader.readAsDataURL(fileList);
      oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
        postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数
      };
    }  
    

    其次步:根据容器的深浅使用canvas绘制图片

    在上一步使用File API的FileReader已经得到了急需上传图片的地点了,接下去要求动用canvas把这一个图形绘制出来。这里怎么不直接插入img而用canvas重新绘制呢,那不是数见不鲜了吗?其实否则。即便用img直接插入页面,就不能够自适应居中了,假如利用canvas绘制图片,不但能使图片自适应居中以及能等比例缩放,并且有利于把图片的坐标,尺寸大小传给后来的遮罩层,那样能依附图片的坐标以及图片的尺码大小来绘制遮罩层。
    此处稍微要专注下canvas的drawImage方法。

    paintImage: function(url) {
      var t = this;
      var createCanvas = t.getImage.getContext("2d");
      var img = new Image();
      img.src = url;
      img.onload = function(){
    
        //等比例缩放图片(如果图片宽高都比容器小,则绘制的图片宽高 = 原图片的宽高。)
        //如果图片的宽度或者高度比容器大,则宽度或者高度 = 容器的宽度或者高度,另一高度或者宽度则等比例缩放
        //t.imgWidth:绘制后图片的宽度;t.imgHeight:绘制后图片的高度;t.px:绘制后图片的X轴;t.py:绘制后图片的Y轴
        if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
          t.imgWidth = img.width;
          t.imgHeight = img.height;
    
        } else {
          var pWidth = img.width / (img.height / t.regional.offsetHeight);
          var pHeight = img.height / (img.width / t.regional.offsetWidth);
          t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
          t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
        }
        //图片的坐标
        t.px = (t.regional.offsetWidth - t.imgWidth) / 2   'px';
        t.py = (t.regional.offsetHeight - t.imgHeight) / 2   'px';
    
        t.getImage.height = t.imgHeight;
        t.getImage.width = t.imgWidth;
        t.getImage.style.left = t.px;
        t.getImage.style.top = t.py;
    
        createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片,是为了调整所需框内图片的大小
        t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
        t.cutImage();
        t.drag();
      };
    },
     
    

    出来的作用是如此的:

    必嬴亚洲 3

     第叁步:使用canvas绘制遮罩层 在上一步中早就把必要裁剪的背景图绘制出来了,现在须要依赖背景图的坐标和尺寸来绘制遮罩层覆盖在背景上边,并且采纳canvas的clearRect方法清空出1块裁剪区域,使之与不裁剪的地点做明暗相比。
    (这里的遮罩层仅仅是用来做体现效果,并未做裁剪图片的做事。不精通这一步能否直接去掉?有精晓的童鞋麻烦告诉下本人。)

    //绘制遮罩层:
    t.editBox.height = t.imgHeight;
    t.editBox.width = t.imgWidth;
    t.editBox.style.display = 'block';
    t.editBox.style.left = t.px;
    t.editBox.style.top = t.py;
    
    var cover = t.editBox.getContext("2d");
    cover.fillStyle = "rgba(0, 0, 0, 0.5)";
    cover.fillRect (0,0, t.imgWidth, t.imgHeight);
    cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);
     
    

    第肆步:使用canvas绘制裁剪后的图形
    在第1步里面,把遮罩层绘制好了,不过遮罩层并从未裁剪的力量,仅仅是用来显示裁剪区域与非裁剪区域的对照而已,所以那边就起来做裁剪图片的服从了。同样利用到canvas的drawImage方法。

    //绘制剪切图片:
    t.editPic.height = t.sHeight;
    t.editPic.width = t.sWidth;
    var ctx = t.editPic.getContext('2d');
    var images = new Image();
    images.src = t.imgUrl;
    images.onload = function(){
      ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
      document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL(); //把裁剪后的图片使用img标签显示出来
    }
    

    第六步:拖动裁剪框,重新裁剪图片 使用截图上传头像功能时大家意在能裁剪到满意的图样,所以裁剪框就须求不停的更换才足以裁剪出完美的图纸。前几步已经把裁剪图片的基本作用做出来了,所以未来内需做的便是裁剪框跟进鼠标的移动来实时裁剪图片。

    drag: function() {
      var t = this;
      var draging = false;
      var startX = 0;
      var startY = 0;
    
      document.getElementById('cover_box').onmousemove = function(e) {
        //获取鼠标到背景图片的距离
        var pageX = e.pageX - ( t.regional.offsetLeft   this.offsetLeft );
        var pageY = e.pageY - ( t.regional.offsetTop   this.offsetTop );
        //判断鼠标是否在裁剪区域里面:
        if ( pageX > t.sx && pageX < t.sx   t.sWidth && pageY > t.sy && pageY < t.sy   t.sHeight ) {
          this.style.cursor = 'move';
    
          this.onmousedown = function(){
            draging = true;
            //记录上一次截图的坐标
            t.ex = t.sx;
            t.ey = t.sy;
            //记录鼠标按下时候的坐标
            startX = e.pageX - ( t.regional.offsetLeft   this.offsetLeft );
            startY = e.pageY - ( t.regional.offsetTop   this.offsetTop );
          }
          window.onmouseup = function() {
            draging = false;
          }
    
          if (draging) {
            //移动时裁剪区域的坐标 = 上次记录的定位   (当前鼠标的位置 - 按下鼠标的位置),裁剪区域不能超出遮罩层的区域;
            if ( t.ex   (pageX - startX) < 0 ) {
              t.sx = 0;
            } else if ( t.ex   (pageX - startX)   t.sWidth > t.imgWidth) {
              t.sx = t.imgWidth - t.sWidth;
            } else {
              t.sx = t.ex   (pageX - startX);
            };
    
            if (t.ey   (pageY - startY) < 0) {
              t.sy = 0;
            } else if ( t.ey   (pageY - startY)   t.sHeight > t.imgHeight ) {
              t.sy = t.imgHeight - t.sHeight;
            } else {
              t.sy = t.ey   (pageY - startY);
            }
    
            t.cutImage();
          }
        } else{
          this.style.cursor = 'auto';
        }
      };
    }   
    

    劳苦功高告成,图片如下:

     必嬴亚洲 4

    有童鞋提议,每移动一下鼠标就裁剪一张图纸不是很耗质量吧,为啥不用background-position来做预览效果 保存的时候才用canvas裁出来?1听认为那提议很有道理,所以就在第6步把代码稍微改动了一下。鼠标移动的时候的预览效果是改换图片的background-position,点击保存开关的时候才裁剪图片,把裁剪下来的图片生成新的url就足以传给服务器啦~~
    以下代码是考订过来的,大家有哪些别的好的建议接待提议来喔 ^_^ ^_^
    demo完整代码如下:
    留意:因为用的是seajs写的,所以有个别留意下文件的加载情况啦
    css:

    body{text-align:center;}
    #label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
    #get_image{position:absolute;}
    #edit_pic{position:absolute;display:none;background:#000;}
    #cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
    #show_edit{margin: 0 auto;display:inline-block;}
    #show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; }
    

    html: 

    <input type="file" name="file" id="post_file">
    <button id="save_button">保存</button>
    <div id="label">
      <canvas id="get_image"></canvas>
      <p>
        <canvas id="cover_box"></canvas>
        <canvas id="edit_pic"></canvas>
      </p>
    </div>
    <p>
    
      <img src="">
    </p>
    
    
    <script type="text/javascript" src="../../lib/seajs/sea.js"></script>
    <script type="text/javascript">
    seajs.use(['_example/fileAPI/index_v2.js'], function(clipFile) {
      clipFile.init({
        clipPos: {    //裁剪框的默认尺寸与定位
          x: 15,
          y: 15,
          height: 100,
          width: 100,
        },
      });
    });
    
    </script> 
    

    js:

    define(function(require, exports, module) {
    
      'use strict';
    
      var postFile = {
        init: function(options) {
          var t = this;
          t.regional = document.getElementById('label');
          t.getImage = document.getElementById('get_image');
          t.clipPic = document.getElementById('edit_pic');
          t.coverBox = document.getElementById('cover_box');
          t.achieve = document.getElementById('show_edit');
    
          t.clipPos = options.clipPos;
    
          //初始化图片基本参数
          t.bgPagePos = {     
            x: 0,
            y: 0,
            height: 0,
            width: 0
          };
    
          //传进图片
          document.getElementById('post_file').addEventListener("change", t.handleFiles, false);
    
          //点击保存按钮后再裁剪图片
          document.getElementById('save_button').onclick = function() {
    
            //绘制剪切后的图片:
            t.clipPic.height = t.clipPos.height;
            t.clipPic.width = t.clipPos.width;
    
            var ctx = t.clipPic.getContext('2d');
            var images = new Image();
            images.src = t.imgUrl;
            images.onload = function(){
    
              //drawImage(images,相对于裁剪图片的X, 相对于裁剪图片的Y, 裁剪的高度, 裁剪的宽度, 显示在画布的X, 显示在画布的Y, 显示在画布多高, 显示在画布多宽);
              ctx.drawImage(images,t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width, 0, 0, t.clipPos.height, t.clipPos.width); //裁剪图片
    
              document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.clipPic.toDataURL();
            }
          };
    
          t.drag();
        },
        handleFiles: function() {
    
          var fileList = this.files[0];
          var oFReader = new FileReader();
    
          //读取文件内容
          oFReader.readAsDataURL(fileList);
    
          //当读取操作成功完成时调用.
          oFReader.onload = function (oFREvent) { 
    
            //把预览图片URL传给函数
            postFile.paintImage(oFREvent.target.result);
          };
        },
        paintImage: function(url) {
          var t = this;
          var createCanvas = t.getImage.getContext("2d");
    
          var img = new Image();
          img.src = url;
    
          //把传进来的图片进行等比例缩放
          img.onload = function(){
            //等比例缩放图片(如果图片宽高都比容器小,则绘制的图片宽高 = 原图片的宽高。)
            //如果图片的宽度或者高度比容器大,则宽度或者高度 = 容器的宽度或者高度,另一高度或者宽度则等比例缩放
    
            //t.bgPagePos.width:绘制后图片的宽度;
            //t.bgPagePos.height:绘制后图片的高度;
            //t.bgPagePos.x:绘制后图片的X轴;
            //t.bgPagePos.y:绘制后图片的Y轴
            if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
              t.bgPagePos.width = img.width;
              t.bgPagePos.height = img.height;
    
            } else {
              var pWidth = img.width / (img.height / t.regional.offsetHeight);
              var pHeight = img.height / (img.width / t.regional.offsetWidth);
    
              t.bgPagePos.width = img.width > img.height ? t.regional.offsetWidth : pWidth;
              t.bgPagePos.height = img.height > img.width ? t.regional.offsetHeight : pHeight;
            }
    
            //图片的坐标
            t.bgPagePos.x = (t.regional.offsetWidth - t.bgPagePos.width) / 2   'px';
            t.bgPagePos.y = (t.regional.offsetHeight - t.bgPagePos.height) / 2   'px';
    
            t.getImage.height = t.bgPagePos.height;
            t.getImage.width = t.bgPagePos.width;
            t.getImage.style.left = t.bgPagePos.x;
            t.getImage.style.top = t.bgPagePos.y;
    
            createCanvas.drawImage(img,0,0,t.bgPagePos.width,t.bgPagePos.height);//没用直接插入背景图片而用canvas绘制图片,是为了调整所需框内图片的大小
    
            t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
    
            t.clipImg();
          };
        },
        clipImg: function() {
          var t = this;
    
          //绘制遮罩层:
          t.coverBox.height = t.bgPagePos.height;
          t.coverBox.width = t.bgPagePos.width;
          t.coverBox.style.display = 'block';
          t.coverBox.style.left = t.bgPagePos.x;
          t.coverBox.style.top = t.bgPagePos.y;
    
          var cover = t.coverBox.getContext("2d");
          cover.fillStyle = "rgba(0, 0, 0, 0.5)";
          cover.fillRect (0,0, t.bgPagePos.width, t.bgPagePos.height);
          cover.clearRect(t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width);
    
          t.achieve.style.background = 'url('   t.imgUrl   ')'   -t.clipPos.x   'px '   -t.clipPos.y   'px no-repeat';
          t.achieve.style.height = t.clipPos.height   'px';
          t.achieve.style.width = t.clipPos.width   'px';
        },
        drag: function() {
          var t = this;
          var draging = false;
          var _startPos = null;
    
          t.coverBox.onmousemove = function(e) {
            e = e || window.event;
    
            if ( e.pageX == null && e.clientX != null ) {
    
              var doc = document.documentElement, body = document.body;
    
              e.pageX = e.clientX   (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
              e.pageY = e.clientY   (doc && doc.scrollTop || body && body.scrollTop);
            }
    
            //获取鼠标到背景图片的距离
            var _mousePos = {
              left: e.pageX - ( t.regional.offsetLeft   this.offsetLeft ),
              top: e.pageY - ( t.regional.offsetTop   this.offsetTop )
            }
    
            //判断鼠标是否在裁剪区域里面:
            if ( _mousePos.left > t.clipPos.x && _mousePos.left < t.clipPos.x   t.clipPos.width && _mousePos.top > t.clipPos.y && _mousePos.top < t.clipPos.y   t.clipPos.height ) {
              this.style.cursor = 'move';
    
              this.onmousedown = function(){
                draging = true;
                //记录上一次截图的坐标
                t.ex = t.clipPos.x; 
                t.ey = t.clipPos.y;
    
                //记录鼠标按下时候的坐标
                _startPos = {
                  left: e.pageX - ( t.regional.offsetLeft   this.offsetLeft ),
                  top: e.pageY - ( t.regional.offsetTop   this.offsetTop )
                }
              }
    
              if (draging) {
                //移动时裁剪区域的坐标 = 上次记录的定位   (当前鼠标的位置 - 按下鼠标的位置),裁剪区域不能超出遮罩层的区域;
                if ( t.ex   ( _mousePos.left - _startPos.left ) < 0 ) {
                  t.clipPos.x = 0;
                } else if ( t.ex   ( _mousePos.left - _startPos.left )   t.clipPos.width > t.bgPagePos.width ) {
                  t.clipPos.x = t.bgPagePos.width - t.clipPos.width;
                } else {
                  t.clipPos.x = t.ex   ( _mousePos.left - _startPos.left );
                };
    
                if (t.ey   ( _mousePos.top - _startPos.top ) < 0) {
                  t.clipPos.y = 0;
                } else if ( t.ey   ( _mousePos.top - _startPos.top )   t.clipPos.height > t.bgPagePos.height ) {
                  t.clipPos.y = t.bgPagePos.height - t.clipPos.height;
                } else {
                  t.clipPos.y = t.ey   ( _mousePos.top - _startPos.top );
                }
    
                t.clipImg();
              }
    
              document.body.onmouseup = function() {
                draging = false;
                document.onmousemove = null;
                document.onmouseup = null;
              }
            } else{
              this.style.cursor = 'auto';
            }
          };
        }
      }
      return postFile;
    });
    

    上述就是本文的全体内容,希望对我们的就学抱有扶助。

    html2canvas截图的主题素材
    必嬴亚洲 5
    当自个儿加上allowTaint: true, taintTest: false,那多少个个性的时候就能够报那么些错,但不加那七个就能够截取不全,怎么消除?
    必嬴亚洲 6

    html5 canvas从圆初步,html伍canvas

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>html5 canvas从圆开始</title>
    <script src="js/modernizr.js"></script>
    </head>
    
    <body>
    
    
    <script type="text/javascript">
    window.addEventListener('load',eventWindowLoaded,false);
    function eventWindowLoaded(){
     canvasApp();
    }
    function canvasSupport(){
     return Modernizr.canvas;
    }
    function canvasApp(){
     if(!canvasSupport()){
      return;
     }else{
      var theCanvas = document.getElementById('canvas')
      var context = theCanvas.getContext("2d")
    
     }
     drawScreen();
        function drawScreen(){
      //颜色粉色,线宽10,
       context.beginPath();
       context.strokeStyle="pink";
       context.lineWidth=10;
       context.arc(100,100,20,(Math.PI/180)*0,(Math.PI/180)*360,false);
       //100,100圆心的位置
       //20半径
       //开始喝结束的弧度制从0-360
       //1弧度 =  π/180°弧度不是角度哦
       //true和false对象弧线方向
       context.stroke();
       context.closePath();
    
       context.beginPath();
       context.arc(200,100,20,(Math.PI/180)*0,(Math.PI/180)*90,false);
       context.stroke();
       context.closePath();
    
       context.beginPath();
       context.arc(300,100,20,(Math.PI/180)*0,(Math.PI/180)*90,true);
       context.stroke();
       context.closePath();
    
       }
    }
    
    
    </script>
    <canvas id="canvas" width="500" height="500">
    你的浏览器无法使用canvas
    如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!!
    </canvas>
    </body>
    </html>
    

     

    必嬴亚洲 7

     

    canvas从圆伊始,html5canvas !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xmlns="...

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:必嬴亚洲:canvas从圆开始,canvas实现本地截图教

    关键词: 截图 html2canvas 必赢亚洲366net