最近琢磨想在移動端實現點擊按鈕保存圖片的功能。
在網上搜了好久,發現普遍的方法是: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 !