巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

html 基于 canvas 完成的一个截图小demo

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-20 08:51:18 阅读数: 153

写在最前

记得之前在大师上看到一个分享,讲授基于js的截图计划,具体的不记得了,只记得还挺成心思的貌似用了canvas?以是此次筹算本身写一个分享给大师作者的思绪。这只是一个很粗陋的小demo若有bug请提issues。根据老例po代码地点。

成果图

全体思绪

  • 设置起头/竣事疾速键
  • 起头后将DOM绘制成canvas来笼盖原始DOM界面
  • 增添一张canvas摹拟鼠标截图地区
  • 增添一张canvas用来绘制鼠标截图地区对应的阅读器界面(从第一张canvas中截取)
  • 保管截取的图象

1.设置起头/竣事疾速键

因为疾速键能够致使的抵触故但愿起头疾速键能够不限制疾速键数目,以是在第一个参数中接纳了数组的情势停止通报。

function screenShot(quickStartKey, EndKey) {
  //兼容性斟酌不利用...扩大字符串
  var keyLength = quickStartKey.length
  var isKeyTrigger = {}
  var cantStartShot = false
  ...
  quickStartKey.forEach(function(item) { //遍历参数数组
    isKeyTrigger[item] = false //默许数组中一切键都不触发
  })
  $("html").on("keyup", function(e) {
    var keyCode = e.which
    if(keyCode === EndKey) {
      ...
    } else if(!cantStartShot) {
      isKeyTrigger[keyCode] = true
      var notTrigger = Object.keys(isKeyTrigger).filter(function(item) {
        return isKeyTrigger[item] === false //检查有不必要触发的疾速键
      })
      if(notTrigger.length === 0) { //不必要触发的疾速键即能够起头截图
        cantStartShot = true
        beginShot(cantStartShot)
      }
    }
  })

2.将的DOM绘制成canvas来笼盖原始DOM界面

若是接纳原生的体例能够参照MDN下对在canvas中绘制DOM的先容。外面最辣手的处所是你必要成立一个包罗XML的SVG图象触及到的元素为<foreignObject>。若何能计较出以后阅读器显现的DOM并且将其提掏出来实在是最烦琐的。好的实在作者也不好的思绪手动完成一个=。=,以是挑选了这个html2canvas库来完成这件事。大抵挪用体例以下:

function beginShot(cantStartShot) {
    if(cantStartShot) {
        html2canvas(document.body, {
            onrendered: function(canvas) {
                //获得与界面分歧的canvas图象
            }
        })
    }
}

3.增添一张canvas摹拟鼠标截图地区

这个处所的完成原来筹算利用原生canvasAPI,可是外面触及到一个题目便是在鼠标按下起头拖拽后,canvas要及时绘制,这外面就要引出一个近似于PS图层的观点,每当mousemove的时辰都画出一个以后的截图框,可是当下一次触发mousemove的时辰就删掉上一个截图框。以此来摹拟及时的绘制进程。无法作者不找到利用canvas原生API的体例,若是有的话必然告知我若何对画出的图做出标记。在这里作者利用了一个基于Jq的canvas的库叫做Jcanvas,外面给出了图层的观点,即在一个图层上只能画一张图,同时能够给图层标记称号。这就知足了作者的须要,完成以下:

$("#" + canvasId).mousedown(function(e) {
    $("#"+canvasId).removeLayer(layerName) //删除上一图层
    layerName += 1
    startX = that._calculateXY(e).x //计较鼠标地位
    startY = that._calculateXY(e).y
    isShot = true
    $("#"+canvasId).addLayer({
        type: "rectangle", //矩形
        ...
        name:layerName, //图层称号
        x: startX,
        y: startY,
        width: 1,
        height: 1
    })
}).mousemove(function(e) {
    if(isShot) {
        $("#"+canvasId).removeLayer(layerName)
        var moveX = that._calculateXY(e).x
        var moveY = that._calculateXY(e).y
        var width = moveX - startX
        var height = moveY - startY
        $("#"+canvasId).addLayer({
            type: "rectangle",
            ...
            name:layerName,
            fromCenter: false,
            x: startX,
            y: startY,
            width: width,
            height: height
        })
        $("#"+canvasId).drawLayers(); //绘制
    }
    })

4.增添一张canvas用来绘制鼠标截图地区对应的阅读器界面

var canvasResult = document.getElementById("canvasResult")
              var ctx = canvasResult.getContext("2d");
              ctx.drawImage(copyDomCanvas, moveX - startX > 0 ? startX : moveX, moveY - startY > 0 ? startY : moveY, width, height, 0, 0, width, height )
              var dataURL = canvasResult.toDataURL("image/png");

此中经由过程drawImage截取了图象,再利用toDataURL体例将图象转换为了base64编码

5.保管截取的图象

function downloadFile(el, fileName, href){
      el.attr({
        "download":fileName,
        "href": href
      })
  }
  ...
downloadFile($(".ok"), "screenShot" + Math.random().toString().split(".")[1] || Math.random()  + ".png", dataURL)
// 传入按键工具、图象保管随机名、base64编码的图象

此中用到了a标签的download属性,当用户点击以后就能够间接停止下载。

安排

依靠项

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jcanvas/16.7.3/jcanvas.min.js"></script>
<script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

设置装备摆设疾速键

screenShot([16, 65], 27) // 起头疾速键设置为shift+a;加入键为ESC

最初

文中最恶心的处所(DOM写入canvas、canvas设置图层)别离接纳了两个库来停止完成,后续作者还会连续存眷若何利用原生API来完成这些操纵,固然小我以为本身写仍是有点。。

以上便是本文的全数内容,但愿对大师的进修有所赞助,也但愿大师多多撑持网页设想。

TAG标签: html   基于   canvas   完成的一个截图小demo  
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事履历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

01
04月
JavaScript条记 函数

简介:行间事务挪用函数(不倡议)script type="text/javascript" // 函数界说 functi... >>概况

15
05月
若何准确设置robots.txt文件_巅云建

robots.txt文件?个合格的SEO网站,有必要在根目录下包罗一下robots.txt文件,这个文件的成果对悉数经营网站的朋友来讲并不生... >>概况

21
04月
css计划之BFC形式(block form

详解BFC【 block formatting context】BFC这个工具说罕见的话你能够不感觉,可是你必定会经常利用到,或许你在用的时辰也... >>概况

05
04月
北京网站扶植教你疾速建站

当互联网在20世纪90年月履历了第一次大高潮时,成立一个网站必要严酷的手艺常识,最少必要精晓一些编程说话能力构建一个简略的网站。现在几近人都... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站