html2canvas生成清晰的圖片實(shí)現(xiàn)打印的示例代碼
發(fā)布時(shí)間：2019-09-30 15:47:45 作者：鄒小Q 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了html2canvas生成清晰的圖片實(shí)現(xiàn)打印的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
最近由于公司業(yè)務(wù)要求，需要完成一個(gè)一鍵生成照片圖片打印總圖的功能
html2canvas是一個(gè)非常強(qiáng)大的截圖插件，很多生成圖片和打印的場(chǎng)景會(huì)用到它
但是效果很模糊 ，本文主要記錄一下如果解決模糊的問題以及各種參數(shù)如何設(shè)置
目錄
- 基本用法
- 處理模糊問題
- 細(xì)節(jié)問題-壓縮base64, 導(dǎo)出處理
基本用法
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 為放大倍數(shù) ，我這里設(shè)置為4 ，越高理論上越清晰
dom.offsetWidth height: dom.offsetHeight 直接取得需要轉(zhuǎn)為圖片的dom元素的寬高
處理模糊問題
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
這段代碼去除鋸齒，會(huì)使圖片變得清晰，結(jié)合scale放大處理
細(xì)節(jié)問題
如果生成的base64太大，會(huì)損耗性能，需要壓縮base64
首先可能需要獲取base64的大小
getImgSize: function (str) {
//獲取base64圖片大小，返回KB數(shù)字
var str = str.replace('data:image/jpeg;base64,', '');//這里根據(jù)自己上傳圖片的格式進(jìn)行相應(yīng)修改
var strLength = str.length;
var fileLength = parseInt(strLength - (strLength / 8) * 2);
// 由字節(jié)轉(zhuǎn)換為KB
var size = "";
size = (fileLength / 1024).toFixed(2);
return parseInt(size);
}
然后根據(jù)獲取的大小判斷你是否要壓縮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,/, '')
// 調(diào)用接口保存圖片
}).catch(function(err){
dialog.tip(err.message, dialog.MESSAGE.WARN);
})
本文主要包括，html2canvas使用，參數(shù)，如何保證圖片的清晰度和base64的一下處理
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
html2 canvas生成清晰的圖片實(shí)現(xiàn)打印功能
html2canvas是一個(gè)非常強(qiáng)大的截圖插件，很多生成圖片和打印的場(chǎng)景會(huì)用到它。接下來通過本文給大家介紹html2 canvas生成清晰的圖片實(shí)現(xiàn)打印功能，感興趣的朋友跟隨小編一起2019-09-23- 這篇文章主要介紹了前端實(shí)現(xiàn)打印圖像功能,需要的朋友可以參考下2019-08-27
- 這篇文章主要介紹了一個(gè)不錯(cuò)的html 打印代碼支持翻頁，非常實(shí)用，需要的朋友可以參考下2014-09-17
- 打印屬性 打印 HTML 文檔總是會(huì)出現(xiàn)問題。在 CSS2 中，我們可以借助打印屬性讓打印 web 內(nèi)容更容易一些。 屬性 描述 值 orphans 設(shè)置元素放在頁面底部時(shí)所允許的最少文2009-07-13
將XHTML CSS頁面轉(zhuǎn)換為打印機(jī)頁面
在以前，為Web頁面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過修改的單獨(dú)頁面，這樣才能夠在打印的時(shí)候獲得令人滿意的效果?，F(xiàn)在，通過使用結(jié)構(gòu)化的XHTML和2009-04-02將XHTML CSS頁面轉(zhuǎn)換為打印機(jī)頁面
在以前，為Web頁面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過修改的單獨(dú)頁面，這樣才能夠在打印的時(shí)候獲得令人滿意的效果?，F(xiàn)在，通過使用結(jié)構(gòu)化的XHT2008-10-17html 打印相關(guān)操作與實(shí)現(xiàn)詳解
這篇文章主要介紹了html 打印相關(guān)操作與實(shí)現(xiàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-02-19