最近琢磨想在移动端实现点击按钮保存图片的功能。

在网上搜了好久，发现普遍的方法是：html2canvas.js实现把html转图片，canvas2image.js则实现图片的下载。

把网上的案例套用之后发现html转图片没啥问题，但是到了下载图片一堆bug啊，ios浏览器点击下载都是直接到一个图片的链接，再手动长按保存。安卓跟ios在微信打开都是'点击下载'是完全没反应啊，老爹。这样就玩不了了

查看微信sdk 后发现：

downloadImage 仅支持 uploadImage 接口上传的图片。
uploadImage 接口仅支持 chooseImage 接口相册选择的图片。
chooseImage 接口是从本地相册选择图片。

以上问题都是移动端会出现的bug，PC端是完全正常的，但是没用啊，这功能就移动端用得多。

最后我觉得取个折中的办法是最好的，只做点击生成图片，然后提示用户长按保存，有点截图的意思。毕竟所有浏览器都有个长按图片保存的功能的。觉得这样对用户不友好? 没办法了，你们继续琢磨，有更好的方法也让我参考一下。

引用html2canvas会遇到两个比较明显的问题：1，不能保存渲染的图片。2，保存的图片模糊。

其实这个也很容易解决，设置下参数就可以，代码里有注释。

html:

<body><section id="content"><img class="bg" src="https://m.qcwoshou.com/084087ec-ecb4-4bdf-be11-68bcbdb868a8.jpg" alt="" /><p>昵称：<span>caicaicai</span></p><p>个签：<span>Hello world</span></p><img class="icon" src="http://cdnzzz.vcgeek.cn/forward@2x.png" alt="" /></section><div class="btnSave"><button onclick="saveImg()">生成图片(第一步)</button><button onclick="download()">下载(第二步)</button></div><div id='photoPic' class="photoPic"><span>长按保存图片</span><div class="imgbox"><i>X</i><img src="" alt="" /></div></div><div id="images"></div>
</body>

script:

<script>/** div转成canvas图形,canvas转base64*/function saveImg(){html2canvas($("#content"), {useCORS: true, //（图片跨域相关）allowTaint: false, //允许跨域（图片跨域相关）dpi: 300,//设置生成图片清晰度//scale: window.devicePixelRatio*2 // 默认值是window.devicePixelRatio(设备像素比)onrendered: function(canvas) {$("#photoPic img").attr("src",canvas.toDataURL());$("#photoPic").fadeIn();$("#photoPic").addClass("animate");//用于点击'下载'按钮canvas.setAttribute('id','thecanvas');document.getElementById('images').appendChild(canvas);}});}$(".imgbox i").click(function(){$("#photoPic").hide();});</script>
<script>/** 下载图片*/function download(){var oCanvas = document.getElementById("thecanvas");// 获取图片资源var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');saveFile(img_data1, 'abc');}// 保存文件函数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>

完整dome下载地址：

https://download.csdn.net/download/caimingxian401/10879462

实际用的时候，还是会遇到很多坑，有过不去的坎可以留下评论，看到就回

H5点击生成图片dome相关推荐

android点击按钮打开一个网页,Android实现H5点击打开app或跳转指定界面
Android实现H5点击打开app或跳转指定界面本文原创,转载请注明出处.欢迎关注我的简书. 安利一波我写的开发框架:MyScFrame喜欢的话就给个Star 场景 H5界面中的入口有时候为了 ...
h5页面保存img_从微信H5点击保存图片说起
微信H5里保存图片,大都是通过长按操作,弹起actionsheet保存照片.但我们的部分用户是老年群体,不知道怎么进行"长按"操作.考虑到这个因素,产品要求实现点击保存按钮来保存图 ...
h5 html页面生成图片
h5 html页面生成图片引入html2canvas.min.js <div class="success_content"> ...
h5端点击复制分享链接
功能实现: 运用原生js实现H5 网页点击复制来分享链接功能一:进行组件事件,传参pcUrl <view class="share" @click="handle ...
关于H5页面中生成图片的两种方式！
前言: 我们在做项目过程中,经常会遇到自定义生成一张图片并可以长按保存.长按保存图片在微信等浏览器中默认就有,那么对于生成图片的有哪些方式呢? 方法一: 利用canvas绘制图形,然后生成图片代码如 ...
微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现
在微信公众号H5里面可能会遇到点击图片预览,还可以放大缩小,微信内置有这个功能可以实现用vue写项目的话,先 cnpm install weixin-js-sdk --save 接着给图片一个点击事 ...
uni-app开发h5点击跳转到h5，微信小程序跳转到h5
<imageclass="tvcBu"@click="toUrl"mode="aspectFit"src="../../st ...
微信小程序嵌套h5页面，h5页面返回小程序，小程序和h5的页面和交互方法，h5点击分享小程序页面
相信大家在做小程序的时候有些需求会需要嵌套h5页面正常的h5页面嵌套很简单就是一个web-view然后放入h5链接就可以了 <web-view src="http://www.goo ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...

H5点击生成图片dome

html:

script:

H5点击生成图片dome相关推荐

最新文章

热门文章