html2canvas生成清晰的圖片實(shí)現(xiàn)打印的示例代碼

2024-09-05 07:23:03

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

前言

最近由于公司業(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í)有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：html5視頻媒體標(biāo)簽video的使用方法及完整參數(shù)說明詳解

下一篇：基于 HTML5 WebGL 實(shí)現(xiàn)的醫(yī)療物流系統(tǒng)