BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

html2 canvasで印刷用の鮮明な画像を生成

2022-02-06 01:39:56

最近、会社の業務上の必要性から、ワンクリックで写真画像の生成を完了し、全体像を印刷する必要があります

html2canvasは非常に強力なスクリーンショットプラグインで、多くの画像生成や印刷の場面で利用されている

しかし、結果はぼやけてしまうので、この記事では、ぼやけの問題を解決する方法と、さまざまなパラメータの設定方法を記録します

基本的な使い方 

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()
}

スケールは倍率で、私は4に設定しました。

dom.offsetWidth height: dom.offsetHeight 画像に変換する dom 要素の幅と高さを直接取得する。

ぼかしの処理 

var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

このコードはジャギーを除去し、画像をシャープにするもので、拡大縮小処理と組み合わせて使用します。

詳細

生成されたbase64が大きすぎる場合、パフォーマンスが低下するため、base64圧縮する必要がある

まず、base64のサイズを取得する必要があるかもしれません。 

getImgSize: function (str) {
    //Get the base64 image size and return the KB number
    var str = str.replace('data:image/jpeg;base64,', '');//modify here according to the format of your uploaded image

    var strLength = str.length;
    var fileLength = parseInt(strLength - (strLength / 8) * 2);

    // convert from bytes to 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,/, '')
    // call the interface to save the image
}).catch(function(err){
    dialog.tip(err.message, dialog.MESSAGE.WARN);
})

この記事では、特に html2canvas の使用方法、パラメータ、画像の鮮明さを確保する方法、base64 の処理について説明します。

概要

以上、印刷機能を実現するための鮮明な画像を生成するhtml2キャンバスの小さな紹介でした、お役に立てれば幸いです、もし何か質問があれば、私にメッセージをください、私は迅速に皆さんに返信します。これからもスクリプトハウスのウェブサイトをよろしくお願いします。

この記事がお役に立つようでしたら、出典を明記の上、ご自由に再掲載してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します