html2canvas生成清晰的圖片實現打印的示例代碼

  發布時間:2019-09-30 15:47:45   作者:鄒小Q   我要評論
這篇文章主要介紹了html2canvas生成清晰的圖片實現打印的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

前言

最近由于公司業務要求,需要完成一個一鍵生成照片圖片打印總圖的功能

html2canvas是一個非常強大的截圖插件,很多生成圖片和打印的場景會用到它

但是效果很模糊 ,本文主要記錄一下如果解決模糊的問題以及各種參數如何設置

目錄

  1. 基本用法
  2. 處理模糊問題
  3. 細節問題-壓縮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放大處理

細節問題

如果生成的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);

    // 由字節轉換為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的一下處理

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

北京pk赛车人工计划软件手机版