H5點擊生成圖片dome

最近琢磨想在移動端實現點擊按鈕保存圖片的功能。

在網上搜了好久,發現普遍的方法是: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 !

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章