js实现通过canvas截图保存到本地

最新推荐文章于 2024-03-13 11:20:17 发布
最新推荐文章于 2024-03-13 11:20:17 发布
阅读量1.1w 收藏 9
点赞数
文章标签： html2canvas js截图 js下载图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012246064/article/details/78032450
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<body>
<a href="javascript:void(0);"  id="downImg" onclick="downloadFile();"> 下载图片 </a>
<div class="pt18"> 
        <div class="bg-ewm">
            <span id="comName">我是公司名</span>
            <img  id="ewmImg"   src="" /> 
        </div> 
</div>

<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
//图片导出为 png 格式
var imgData ='';
var type = 'png';
function downloadFile(){
    html2canvas($(".pt18")).then(function(canvas) {
          canvas.id='mycanvas';
          document.body.appendChild(canvas);
          var canvas = document.getElementById("mycanvas");
          imgData = canvas.toDataURL(type);
          location = imgData;

         // 加工image data，替换mime type
         imgData = imgData.replace(_fixType(type),'image/octet-stream');

        // 下载后的问题名
        var filename = '二维码 .' + type;
        // download
        saveFile(imgData,filename);
    });
}


/**
 * 获取mimeType
 * @param  {String} type the old mime-type
 * @return the new mime-type
 */
var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
};



/**
 * 在本地进行文件保存
 * @param  {String} data     要保存到本地的图片数据
 * @param  {String} filename 文件名
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};

</script>
</body>
</html>
liuliuliuhaili
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
js截图 最新版html2canvasv.js
01-03
包含 html2canvasv.js html2canvasv.min.js html2canvasv.svg.js html2canvasv.svg.min.js
将 Canvas 保存为图片并下载至本地
高先生的猫
04-30 5686
在实际开发过程中，有时需要将图表或者地图等基于Canvas技术渲染的数据下载到本地保存到情况，下面介绍两种方法来完成这种功能。 一、a 标签法 a 标签方法主要分为以下步骤： 将 canvas 元素的数据通过原生 api 转换成 base64 编码的图片格式 利用 a 标签设置 download 属性可以将 href 链接元素下载，我们将 a 标签的 href 属性值设置为上一步获得的 b...
html2canvas截图生成图片并保存到本地的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-11 987
html2canvas是一款JavaScript插件，能够将网页上的HTML元素转化为Canvas对象，从而可以将网页截图输出为图片或者PDF文件。它的原理是通过遍历DOM树，将每一个HTML元素转化为Canvas对象，并叠加到一起形成一张完整的图片或者PDF文件。在转化过程中，html2canvas还需要解决一些问题，例如处理CSS属性、特殊元素、浏览器兼容性问题等。html2canvas的原理并不复杂，但是它在实现网页截图这一功能上起到了重要作用，为网页开发、界面设计等领域提供了便利。
前端每日一练：使用 JavaScript 下载图片并保存到本地的方法详解
最新发布
SAXX2的博客
03-13 551
前端每日一练：实现下载图片功能​。
js截图并下载图片和上传照片
Beloved_Jodie的博客
07-11 853
【代码】js截图并下载图片和上传照片。
canvas实现截图功能
weixin_46268888的博客
10-09 914
步骤已经详细标注，会canvas基础的包看包会，可以试着敲一敲哦，哈哈哈~
js使用canvas实现视频截图
SillyLee1的博客
10-14 3246
使用工具 视频播放器API：西瓜播放器 截图：canvas 实现步骤 1. 创建 canvas 元素，创建 canvas 上下文对象 const canvas = document.createElement('canvas'); const canvasCtx = canvas.getContext('2d'); 2. 获取 video 元素 DOM节点，在 React 中也可以使用 useRef 获取 const video = document.getElementById('mse
JS实现网页截图的三种方案
热门推荐
weixin_41884808的博客
06-28 1万+
实现方式 一.canvas html2canvas 过程或者原理(如何将dom转换成canvas图片？) ​ 梳理了其大致的思路： 递归取出目标模版的所有DOM节点，填充到一个rederList，并附加是否为顶层元素/包含内容的容器 等信息 通过z-index ,postion, float等css属性和元素的层级信息将rederList排序，计算出一个canvas的renderQueue 遍历renderQueue，将css样式转为setFillStyle可识别的参数，依据nodeType调用相对应ca
js 页面截图三种解决方案
Caoshilong1的博客
11-30 2185
3、让使用者在浏览器插件再去调用插件（不推荐）2、获取屏幕流转为图片。
使用canvas实现一个小小的截图功能
Sallywa的博客
08-24 5663
???? 效果图 话不多说，先看下效果 ???? 实现思路 ???? 难点 截图动画效果 计算截取区域 生成&获得截取区域图片 ???? 完整代码 1. html部分 import React, { ReactElement, useEffect, useRef, useState } from 'react' import './index.less' export default () => { const clipAreaWrap = useRef(null) // 截图区
canvas截屏网页为图片下载到本地-html2canvas.js
白开水丶
01-03 160
说明：此方法主要是运用canvas 插件：html2canvas.js 插件地址下载：http://html2canvas.hertzen.com/ 在此再附带赠送一位大佬自己页面的链接：https://www.baidufe.com/（备注：插件多多，组件多多，dome多多！！！） //canvasImg为需要截取成图片的html部分 html2canvas(canvasImg).t...
JS中使用cavas截图网页并解决跨域及模糊问题
weixin_45399666的博客
05-12 602
这篇文章主要介绍了JS中使用cavas截取网页并解决跨域以及模糊问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下 我用的是canvas实现，获取你需要截图的模块的div，从而使用canvas对你需要的模块进行截图。 我们先来引入canvas的js文件，js文件获取地址官网主页：http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/html2canvas.js">&l...
JavaScript+html5 canvas实现本地截图教程
11-22
最近有时间了解了下html5的各API，发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加觉得html5好玩了，想着也试试写写这功能权当学习canvas吧。 下面奉上我自己写的一个demo，代码写得比较少，很多细节不会处理。如果有不得当的地方恳请指教，谢谢啦 ^_^ ^_^ 功能实现步奏： 一、获取文件，读取文件并生成url 二、根据容器的大小使用canvas绘制图片 三、使用canvas绘制遮罩层
html2canvas实现js截图+模拟摄像头拍照
06-14
html2canvas实现js截图+模拟摄像头拍照，内含html2canvas.js和canvas2Image.js源码
canvas.js html2canvas解决图片模糊版本
04-15
解决html2canvas图片模糊问题，必须使用此版本
html2canvas截图js
04-09
利用javascript实现页面截图(html2canvas.js资源) 用法: html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; //document.body.appendChild(canvas); //生成base64图片数据 var dataUrl = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = dataUrl; document.body.appendChild(newImg); } });
小程序canvas截图保存到本地
03-13
小程序canvas截图点击保存到本地
js实现canvas保存图片为png格式并下载到本地的方法
10-19
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法，非常具有实用价值，需要的朋友可以参考下
html2canvas实现将dom生成图片并保存至本地
03-29
使用html2canvas实现图片截图并保存至本地或在页面中以canvas的方式渲染
uniapp实现canvas绘制出的二维码的本地保存代码
04-21
以下是Uniapp实现canvas绘制出的二维码的本地保存代码： ```javascript // 1.获取canvas对象 const query = uni.createSelectorQuery().in(this); query.select('#canvas').fields({ node: true, size: true })....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值