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

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

先看效果

代码如下

！DOCTYPE html html head meta charset=' utf-8 ' title/title style type=' text/CSS ' * { padd : 0；保证金： 0；} .clip-img-w{相对位置：宽度： 100%;高度： 100%;font-size : 0；} .clip-img-w img {最大宽度：100%；最大高度： 100%;绝对位置：左： 0；top : 0；右： 0；底部： 0；margin: auto}。剪辑-img-w画布{ position : absolute eleft : 0；top : 0；} .clip-img-w #剪辑画布{ z-index : 2；} .clip-img-w #绘制画布{背景： # fffz-index : 1；} # img { display:块；margin: 0 auto}。box-c {宽度： 400 px高度： 200像素；border: 1px实心# F35252margin: 20px自动；}/style/head body div class=' box-c ' div class=' clip-img-w ' id=' clip-img-w ' canvas id=' draw canvas '/canvas canvas id=' clip canvas '/canvas/div/div！-结果-img src=' http : ' id=' img '/body script type=' text/JavaScript ' var img=document。getelementbyid(' img ')；var URL=' http://img。穆成峰。cn/FVC 7i-gkxyohe7 kgflnfj 7 xezviq '；var wrap=文档。getelementbyid(' clip-img-w ')；var width=wrap . offsetwidthvar height=wrap . offsetheight var clip canvas=document。getelementbyid('剪辑画布')；var绘制画布=文档。getelementbyid('绘制画布')；clip canvas . width=width clip canvas . height=height draw canvas . width=width draw canvas . height=高度；var clip CTX=绘制画布。get context(' 2d ')；var clip img=文档。创建元素(' img ')；clipImg.crossOrigin='匿名；clipImg.src=urlvar timg=clip img。clonenode()；包起来。appendchild(剪辑img)；剪辑img。onload=function(){ var x=math。地板((宽度-这个。宽度)/2)；var y=数学。地板(高度-这个。高度)/2)；clipCtx.drawImage(this，0，0，timg.width，timg.height，x，y，this.width，this。高度)；} var CTX=剪辑画布。GetContext(' 2d ')；ctx.fillStyle='rgba(0，0，0，0.6)'；' ctx.strokeStyle='绿色；var start=nullvar剪辑区域={ }；//裁剪范围剪辑画布。onmousedown=function(e){ start={ x : e . offset x，y : e . offset }；}剪辑画布。onmousemove=函数(e){ if(start){ fill(start。x，start.y，e.offsetX-start.x，e . offset-start。y)} }文档。addeventlistener('鼠标向上'，function(){ if(start){ start=null；var URL=开始剪辑(剪辑区)；img.src=url} })函数填充(x，y，w，h){ ctx.clearRect(0，0，宽度，高度);CTX。begin path()；//遮罩层CTX。global composite operation=' source-over '；ctx.fillRect(0，0，宽度，高度);//画框CTX。global composite operation=' destination-out '；ctx.fillRect(x，y，w，h)；//描边CTX。global composite operation=' 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。笔画()；CTX。close path()；clipArea={ x，y，w，h }；}函数startClip(区域){ var canvas=document。create element(' canvas ')；帆布。宽度=面积。w；帆布。高度=面积。h；var数据=剪辑CTX。getimagedata(区域。x，面积. y，面积. w，面积。h)；var上下文=canvas。get context(' 2d ')；context.putImageData(数据，0,0);返回帆布。todaytaul(' image/png ')；}/脚本/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。