移动端 h5页面长安保存图片到手机

本文使用
使用 html2canvas.min.js 插件

业务需要，这里我先将图片转译为base64,然后项html 片段替换为绘制的 img图片

// An highlighted block//手指长按事件var timeOutEvent;document.querySelector("#share-qr-content").addEventListener("touchstart", function (e) {//开启定时器前先清除定时器，防止重复触发clearTimeout(timeOutEvent);//开启延时定时器timeOutEvent = setTimeout(function () {// saveSharePic();  // 长按事件 处理方法}, 300); //长按时间为300ms，可以自己设置});document.querySelector("#share-qr-content").addEventListener("touchmove", function (e) {//长按过程中，手指是不能移动的，若移动则清除定时器，中断长按逻辑clearTimeout(timeOutEvent);e.preventDefault()  /*--> 若阻止默认事件，则在长按元素上滑动时，页面是不滚动的，按需求设置吧 */});document.querySelector("#share-qr-content").addEventListener("touchend", function (e) {//若手指离开屏幕，时间小于我们设置的长按时间，则为点击事件，清除定时器，结束长按逻辑clearTimeout(timeOutEvent);})// 需要跨域请求的列表
//先把图片转为 base64,避免出现跨域问题
// <img src="${product.store.logo}" id="ossImage1" alt="">
//<img class="img-responsive center-block" src="${product.image}" id="ossImage2"                alt="${product.title}">let imgList = [{id: '#ossImage1', value: $("#ossImage1").attr('src')},{id: '#ossImage2', value: $("#ossImage2").attr('src')}];// // pamoise 初始化请求图片
//业务需要，这里我向我将图片转译Promise.all(imgList.map((item) => getBas64(item.value))).then(result => {// 返回的图片列表，重新渲染到页面上result.forEach((v, k) => {$(imgList[k].id).attr('src', v);});});//保存图片function saveSharePic() {// 想要保存的图片节点const dom = document.getElementById("share-qr-content-body");// 创建一个新的canvasconst canvas = document.createElement("canvas");const width = document.body.offsetWidth; // 可见屏幕的宽const height = document.body.offsetHeight; // 可见屏幕的高// console.log("可见屏幕宽高：" + document.body.offsetWidth + "、" + document.body.offsetHeight);const scale = window.devicePixelRatio; // 设备的devicePixelRatio// 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题canvas.width = width * scale;canvas.height = height * scale;// console.log("canvas宽高：" + canvas.width + "、" + canvas.height);canvas.getContext('2d').scale(scale, scale);// dom节点绘制成canvashtml2canvas(dom, {useCORS: true, allowTaint: true, background: '#ffffff'}).then(function (canvas) {const img = canvas2Image(canvas, canvas.width, canvas.height);img.crossOrigin = "anonymous";img.style.cssText = "width:100%;position:absolute;top:0px;left:0;opacity:1;z-index:200;border-radius: 15px;";// console.log("图片宽高：" + img.width + "、" + img.height);$("#share-qr-content-body").html(img);// document.body.appendChild(img);});}//利用canvas获取图片的base64编码创建图片对象function canvas2Image(canvas, width, height) {const retCanvas = document.createElement("canvas");const retCtx = retCanvas.getContext("2d");retCanvas.width = width;retCanvas.height = height;retCtx.drawImage(canvas, 0, 0);const img = document.createElement("img");img.crossOrigin = 'anonymous';img.src = retCanvas.toDataURL("image/jpg", 1); // 可以根据需要更改格式return img;}/*** 图片转base64格式*//*** @description: 图片转base64* @param {String} url 需要转换的图片原链接（http://....jpg）* @param {String} outputFormat 转换出来的图片的类型（canvas支持jpg/png格式）* @return: 返回图片对应的base64编码*/function getBas64(url, outputFormat = 'image/jpg') {return new Promise(function (resolve, reject) {let canvas = document.createElement('CANVAS'),ctx = canvas.getContext('2d'),img = new Image;img.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求img.onload = function () {canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);let dataURL = canvas.toDataURL(outputFormat);canvas = null;resolve(dataURL);};// img.src = url; // 旧的方式img.src = url + '?t=' + new Date().valueOf() // 防止oss的缓存问题})}

移动端 h5页面长安保存图片到手机相关推荐

移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
移动端H5页面，关闭手机键盘！
标题移动端H5页面,关闭手机键盘! 最近在手机端页面遇到当点了输入框后弹出手机键盘,当关闭当前弹框页面后手机键盘未关闭. 解决方案: document.activeElement.blur(); 注 ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
h5 默认为移动端页面_html5 移动端H5页面设计尺寸规范
原标题:html5 移动端H5页面设计尺寸规范当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师 ...
【通用CSS模板】移动端H5页面统一样式.css
/*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
php清除h5格式,移动端H5页面端怎样除去input输入框的默认样式
这次给大家带来移动端H5页面端怎样除去input输入框的默认样式,移动端H5页面端除去input输入框的默认样式的注意事项有哪些,下面就是实战案例,一起来看一下. 前两天在开发在微信访问的HTML5页 ...
html5首页图标怎么除掉,移动端H5页面端如何除去input输入框的默认样式
移动端H5页面端如何除去input输入框的默认样式发布时间:2020-09-29 16:41:58 来源:亿速云阅读:124 作者:小新这篇文章主要介绍了移动端H5页面端如何除去input输入框 ...

移动端 h5页面长安保存图片到手机

移动端 h5页面长安保存图片到手机相关推荐

最新文章

热门文章

移动端 h5页面 长安保存图片到手机

移动端 h5页面 长安保存图片到手机相关推荐

最新文章

热门文章

移动端 h5页面长安保存图片到手机

移动端 h5页面长安保存图片到手机相关推荐