最近琢磨想在移动端实现点击按钮保存图片的功能。
在网上搜了好久,发现普遍的方法是: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/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/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/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/download/caimingxian401/10879462
实际用的时候,还是会遇到很多坑,有过不去的坎可以留下评论,看到就回
更多推荐
H5点击生成图片dome
发布评论