分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS截取页面,并保存到本地

发布时间:2023-09-06 02:02责任编辑:苏小强关键词:暂无标签

想截取浏览器上内容,并做成图片保存到本地。

可以使用html2canvas.js进行操作。

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="~/Jquery/jquery-1.10.2.js"></script> ???<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script></head><body> ???@*原始图片*@ ???<div class="my-div"> ???????<img style="width: 400px; height: 300px" src="~/Img/longmao.jpg" /> ???</div> ???<br /> ???<input type="button" onclick="set()" value="截图" /> ???@*截取后存放图片的位置*@ ???<img id="img" /> ???<script> ???????function set() { ???????????//要转换为图片的dom对象 ???????????var element = document.querySelector(‘.my-div‘); ???????????//要显示图片的img标签 ???????????var image = document.querySelector(‘#img‘); ???????????//调用html2image方法 ???????????html2image(element, image); ???????????function html2image(element, image) { ???????????????html2canvas(element).then(function (canvas) { ???????????????????var imageData = canvas.toDataURL(1); ???????????????????//此时图片已经可以显示了 ???????????????????image.src = imageData; ???????????????}); ???????????} ???????} ???</script></body></html>

把数据传入后台,将图片保存到本地。传输后台的数据是Base64的数据,需要转换

 ???????public string Set(string imgdata) ???????{ ???????????try ???????????{ ???????????????var strbase64 = imgdata; ???????????????string dummyData = strbase64.Trim().Replace("data:image/png;base64,", "").Replace("%", "").Replace(",", "").Replace(" ", "+"); ???????????????if (dummyData.Length % 4 > 0) ???????????????{ ???????????????????dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, ‘=‘); ???????????????} ???????????????byte[] arr = Convert.FromBase64String(dummyData); ???????????????MemoryStream ms = new MemoryStream(arr); ???????????????Bitmap bmp = new Bitmap(ms); ???????????????var imagePath = AppDomain.CurrentDomain.BaseDirectory + "123.png"; ???????????????bmp.Save(imagePath, System.Drawing.Imaging.ImageFormat.Png); ???????????????ms.Close(); ???????????} ???????????catch (Exception ex) ???????????{ ???????????????Console.WriteLine(ex); ???????????????return TAjaxCallBack.ERROR; ???????????} ???????}

JS截取页面,并保存到本地

原文地址:https://www.cnblogs.com/xiaoyaodijun/p/9268929.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved