h5页面使用js实现保存当前图片到手机相册

来源：https://bbs.csdn.net/wap/topics/392154316?from=groupmessage
var triggerEvent = "touchstart"; //指定下载方式function saveAs(Url){var blob=new Blob([''], {type:'application/octet-stream'});var url = URL.createObjectURL(blob);var a = document.createElement('a');a.href = Url;a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];var e = document.createEvent('MouseEvents');e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);a.dispatchEvent(e);URL.revokeObjectURL(url);}var imgs = document.getElementsByTagName("img");for(var i = 0,o;o = imgs[i];i++){o.addEventListener(triggerEvent,function(){var url = this.getAttribute("src");saveAs(url);},false);}
<!-- js截屏plugin -->
<script type="text/javascript" src="/h5/screencapture/html2canvas.min.js"></script>
<script type="text/javascript" src="/h5/screencapture/canvas2image.js"></script>
<script type="text/javascript">
function convert2canvas() {

var cntElem = $('#content')[0];

var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象 var width = shareContent.offsetWidth; //获取dom 宽度 var height = shareContent.offsetHeight; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点 var scale = 2; //定义任意放大倍数支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放 canvas.height = height * scale; //定义canvas高度 *缩放 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale var opts = { scale: scale, // 添加的scale 参数 canvas: canvas, //自定义 canvas // logging: true, //日志开关，便于查看html2canvas的内部执行流程 width: width, //dom 原始宽度 height: height, useCORS: true // 【重要】开启跨域配置 };

html2canvas(shareContent, opts).then(function (canvas) {

var context = canvas.getContext('2d'); // 【重要】关闭抗锯齿 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // 【重要】默认转化的格式为png,也可设置为其他格式 var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);

//document.body.appendChild(img); $("#content").css("display", "none"); $(".img-container").append(img); $(img).css({ "width": canvas.width / 2 + "px", "height": canvas.height + "px",/// 2 }).addClass('f-full');

}); } convert2canvas(); /* $(function(){ document.querySelector("button").addEventListener("click", function() { var cntElem = $('#content')[0]; var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象 var width = shareContent.offsetWidth; //获取dom 宽度 var height = shareContent.offsetHeight; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点 var scale = 1.98; //定义任意放大倍数支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放 canvas.height = height * scale; //定义canvas高度 *缩放 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale var opts = { scale: scale, // 添加的scale 参数 canvas: canvas, //自定义 canvas // logging: true, //日志开关，便于查看html2canvas的内部执行流程 width: width, //dom 原始宽度 height: height, useCORS: true // 【重要】开启跨域配置 }; html2canvas(shareContent, opts).then(function (canvas) { var src = canvas.toDataURL(); var link = document.createElement('a'); //设置下载的文件名 link.download = '报告'; link.style.display = 'none'; //设置下载路径 link.href = src; //触发点击 document.body.appendChild(link); link.click(); //移除节点 document.body.removeChild(link); }); }, false);

}); */ </script>

h5页面使用js实现保存当前图片到手机相册相关推荐

uniapp移动app实现将网页保存为图片到手机相册
项目中新增了一个需求,将页面保存为图片,且保存在相册中. Android端运用到的技术点: html2canvas:将网页绘制base64的图片 plus.nativeObj.Bitmap:下载ba ...
android禁止弹出保存此图片,安卓手机相册总是出现陌生图片？教你彻底清除！...
原标题:安卓手机相册总是出现陌生图片?教你彻底清除! 各位小伙伴们在查看手机相册时,是否经常看见一些陌生图片呢?每次删除之后也还是会出现,这该如何解决?如果你也有这样的情况出现,可能是没有将手机中的这 ...
使用html2canvas完成页面截屏并保存为图片
实现网页页面截屏,并且将其转换为指定图片格式保存下来,需要使用到html2canvas.js. 前面是实现原理和步骤分析,具体实现代码在文章尾部. 一.实现HTML页面截屏并保存为图片原理是遍历需要 ...
h5页面使用js实现图片上传（安卓用户也可拍摄、相册二选一）
思路如下: 使用原生input标签实现图片上传时,如果你的写法是如下所示: <input type="file" id="upload_file" @ch ...
安卓手机微信H5中无法长按保存base64图片、blob形式图片的解决办法
解决实现安卓[微信]H5长按无法保存和分享base64图片问题问题产生原因,后台发来图片的base64编码有中有空格存在,而ios的WebView可以自动做处理,android则不能. **解决方法 ...
移动端h5页面软键盘弹出后背景图片被顶上去
移动端h5页面在软键盘弹出后,body的高度被压缩了,就导致原本高度100%的背景图被顶上去一截,需要把div的高度强行设回100%才能解决这个问题 <div class="app&q ...
微信小程序下载图片获取相册授权，保存视频或图片到手机相册
单独建一个downloadfile.js,将方法导出: downloadfile.js文件: //downloadfile.js/*** 下载单个文件*/ function downloadFile( ...
安卓系列手机的H5页面背景色失效的问题（踩坑手机小米8）
标题安卓系列手机的H5页面背景色失效的问题今天做手机端,微信小程序开发,根据实际需求,手写一个遮罩层页面开发完毕之后,进行真机测试,出现问题了,ios是好的 Android一款小米8就不行了在打 ...
java下载图片到手机相册_Unity保存图片到Android手机且更新相册
Android 保存图片到设备前言:在许多的应用或游戏中,大多都有保存图片或者截图等等的功能,这篇文档我们的目的是通过 Unity 保存图片,并且调用 Andorid 中的更新相册的原生方法. 流程 ...

h5页面使用js实现保存当前图片到手机相册

h5页面使用js实现保存当前图片到手机相册相关推荐

最新文章

热门文章