前端js截图;html2canvas;jcrop资源-CSDN文库

共5个文件

js：3个

css：1个

html：1个

3星 · 超过75%的资源需积分: 13 130 浏览量 2018-07-10 11:33:46 上传评论收藏 106KB ZIP 举报

在前端开发中，有时我们需要实现用户在浏览器内截图并保存的功能。这通常涉及到JavaScript库的使用，例如`html2canvas`和`jCrop`。这两个工具可以帮助我们在浏览器环境中捕获HTML元素并进行图像裁剪，从而实现截图功能。 `html2canvas`是一个流行的JavaScript库，它的主要作用是将HTML内容转换为Canvas画布。这个库可以解析DOM结构，并将其中的元素渲染到canvas元素上。由于浏览器可以直接将canvas内容导出为图片，因此`html2canvas`成为前端截图的关键工具。它支持大部分CSS样式，但并非所有特性都完全兼容，因此在实际使用时需要注意兼容性问题。你需要引入`html2canvas`库。一般通过CDN链接或者将其下载到本地项目中。然后，你可以选择一个HTML元素（如div）作为截图的目标，调用`html2canvas`函数来生成canvas： ```javascript html2canvas(document.querySelector('#target')).then(canvas => { canvas.toBlob(blob => { let url = URL.createObjectURL(blob); // 创建img元素，设置其src为生成的图片url，然后可以进行保存或展示操作 let img = document.createElement('img'); img.src = url; document.body.appendChild(img); }); }); ``` 在这个过程中，`html2canvas`返回一个Promise，当Promise解析时，会得到一个canvas对象。然后我们可以通过`canvas.toBlob`将canvas内容转换为blob，进一步生成图片URL并添加到页面上，或者进行保存操作。然而，如果需要对截图进行裁剪，这就涉及到`jCrop`的使用。`jCrop`是一个强大的jQuery图像裁剪插件，它可以允许用户自由选择截图区域，提供了一套完整的API来处理裁剪操作。你需要引入jQuery和`jCrop`的库，然后绑定到目标图像上： ```html <img id="target" src="your-image-url"> <script> $(function() { $('#target').Jcrop({ aspectRatio: 1, // 可以设定裁剪区的宽高比例 onSelect: updateCoords, // 当裁剪框移动或缩放时触发 }); }); function updateCoords(c) { console.log(c.x, c.y, c.w, c.h); // 输出裁剪框坐标和尺寸 } </script> ``` `jCrop`提供了`select`事件，可以在用户调整裁剪框时获取裁剪的坐标和尺寸。然后，你可以结合`html2canvas`生成的canvas，根据裁剪坐标截取canvas的一部分： ```javascript // 假设c是jCrop提供的裁剪坐标和尺寸 let croppedCanvas = document.createElement('canvas'); croppedCanvas.width = c.w; croppedCanvas.height = c.h; let ctx = croppedCanvas.getContext('2d'); ctx.drawImage(canvas, c.x, c.y, c.w, c.h, 0, 0, c.w, c.h); ``` `croppedCanvas`就是裁剪后的图像，可以按照之前的方式处理成图片并保存。总结来说，`html2canvas`和`jCrop`结合使用，可以让前端开发者在浏览器中实现自定义截图并裁剪的功能。通过`html2canvas`将HTML元素转为可操作的canvas，再利用`jCrop`的裁剪功能，用户可以选择感兴趣的区域并进行保存。在实际项目中，需要注意浏览器兼容性、图片质量、性能优化等问题，以确保最佳的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

demo.zip （5个子文件）

demo

jquery.Jcrop.js 41KB

jquery.Jcrop.css 3KB

html2canvas.js 323KB

jquery-1.8.0.min.js 90KB

demo.html 2KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { color: red; } /* body>img{ display:none!important; } */ </style> </head> <body> <div class="container" > <button onclick="convertHtml2Canvas()">截取</button> <button onclick="saveImage()">保存</button> <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> <a herf="" id="aCanvas" download="截图.png" style="display:none;" target="_blank"></a> <div id="divCanvas" style="padding: 0px;height: 200px;"> </div> </div> <link rel="stylesheet" href="jquery.Jcrop.css"> <script src="./jquery-1.8.0.min.js"></script> <script src="./html2canvas.js"></script> <script src="jquery.Jcrop.js"></script> <script> var jcropApi; var x1,y1,w,h; //先将目标区域生成一张图片，然后将这个图片放入编辑区域divCanvas中，再对图片生成选区 function convertHtml2Canvas() { html2canvas(document.getElementById("capture"), { allowTaint: false, taintTest: true }).then(function(canvas) { var img = convertCanvasToImage(canvas); img.id="imgCanvas"; $("#divCanvas").html(img); $('#imgCanvas').Jcrop({ onChange: jcropChange, allowSelect: true, baseClass: 'jcrop' }, function() { jcropApi = this; }); }).catch(function(e) { console.error('error', e); }); } //画选区 function jcropChange(c){ x1=c.x; y1=c.y; w=c.w; h=c.h; } //保存选区内容 function saveImage(){ var image = document.getElementById("imgCanvas"); var canvas = convertImageToCanvas(image,x1,y1,w,h); var a = document.getElementById("aCanvas"); a.setAttribute("href", canvas.toDataURL("image/png")); a.click(); } // Converts canvas to an image function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png", 0.1); return image; } // Converts image to canvas; returns new canvas element function convertImageToCanvas(image, startX, startY, width, height) { var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height); return canvas; } </script> </body> </html>

评论收藏

内容反馈