最近琢磨想在移动端实现点击按钮保存图片的功能。
在网上搜了好久，发现普遍的方法是：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/[email protected]" 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
实际用的时候，还是会遇到很多坑，有过不去的坎可以留下评论，看到就回
文章不定期更新，喜欢可给like ！