html2canvas生成清晰的圖片實現打印的示例代碼
發(fā)布時間:2019-09-30 15:47:45 作者:鄒小Q
我要評論

這篇文章主要介紹了html2canvas生成清晰的圖片實現打印的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
前言
最近由于公司業(yè)務要求,需要完成一個一鍵生成照片圖片打印總圖的功能
html2canvas是一個非常強大的截圖插件,很多生成圖片和打印的場景會用到它
但是效果很模糊 ,本文主要記錄一下如果解決模糊的問題以及各種參數如何設置
目錄
- 基本用法
- 處理模糊問題
- 細節(jié)問題-壓縮base64, 導出處理
基本用法
window.html2canvas(dom, { scale: scale, width: dom.offsetWidth, height: dom.offsetHeight }).then(function (canvas) { var context = canvas.getContext('2d'); context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var src64 = canvas.toDataURL() }
scale 為放大倍數 ,我這里設置為4 ,越高理論上越清晰
dom.offsetWidth height: dom.offsetHeight 直接取得需要轉為圖片的dom元素的寬高
處理模糊問題
var context = canvas.getContext('2d'); context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false;
這段代碼去除鋸齒,會使圖片變得清晰,結合scale放大處理
細節(jié)問題
如果生成的base64太大,會損耗性能,需要壓縮base64
首先可能需要獲取base64的大小
getImgSize: function (str) { //獲取base64圖片大小,返回KB數字 var str = str.replace('data:image/jpeg;base64,', '');//這里根據自己上傳圖片的格式進行相應修改 var strLength = str.length; var fileLength = parseInt(strLength - (strLength / 8) * 2); // 由字節(jié)轉換為KB var size = ""; size = (fileLength / 1024).toFixed(2); return parseInt(size); }
然后根據獲取的大小判斷你是否要壓縮base64
壓縮的代碼如下
compress: function (base64String, w, quality) { var getMimeType = function (urlData) { var arr = urlData.split(','); var mime = arr[0].match(/:(.*?);/)[1]; // return mime.replace("image/", ""); return mime; }; var newImage = new Image(); var imgWidth, imgHeight; var promise = new Promise(function (resolve) { newImage.onload = resolve; }); newImage.src = base64String; return promise.then(function () { imgWidth = newImage.width; imgHeight = newImage.height; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); if (Math.max(imgWidth, imgHeight) > w) { if (imgWidth > imgHeight) { canvas.width = w; canvas.height = w * imgHeight / imgWidth; } else { canvas.height = w; canvas.width = w * imgWidth / imgHeight; } } else { canvas.width = imgWidth; canvas.height = imgHeight; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height); var base64 = canvas.toDataURL(getMimeType(base64String), quality); return base64; }) }
使用方法
self.compress(src64,width,1).then(function(base){ src64 = base src64 = src64.replace(/data:image\/.*;base64,/, '') // 調用接口保存圖片 }).catch(function(err){ dialog.tip(err.message, dialog.MESSAGE.WARN); })
本文主要包括,html2canvas使用,參數,如何保證圖片的清晰度和base64的一下處理
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
- html2canvas是一個非常強大的截圖插件,很多生成圖片和打印的場景會用到它。接下來通過本文給大家介紹html2 canvas生成清晰的圖片實現打印功能,感興趣的朋友跟隨小編一起2019-09-23
- 這篇文章主要介紹了前端實現打印圖像功能,需要的朋友可以參考下2019-08-27
- 這篇文章主要介紹了一個不錯的html 打印代碼支持翻頁,非常實用,需要的朋友可以參考下2014-09-17
- 打印屬性 打印 HTML 文檔總是會出現問題。在 CSS2 中,我們可以借助打印屬性讓打印 web 內容更容易一些。 屬性 描述 值 orphans 設置元素放在頁面底部時所允許的最少文2009-07-13
- 在以前,為Web頁面創(chuàng)建一個打印機友好的版本意味著要設計一個布局和格式都經過修改的單獨頁面,這樣才能夠在打印的時候獲得令人滿意的效果?,F在,通過使用結構化的XHTML和2009-04-02
- 在以前,為Web頁面創(chuàng)建一個打印機友好的版本意味著要設計一個布局和格式都經過修改的單獨頁面,這樣才能夠在打印的時候獲得令人滿意的效果?,F在,通過使用結構化的XHT2008-10-17
- 這篇文章主要介紹了html 打印相關操作與實現詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學2020-02-19