現在、WeChat のパブリック アカウントの運用活動が多くなっており、写真を生成する必要があります。生成した写真は、友人に送信したり、モーメントで回覧したりすることができ、製品のプロモーションに役立ちます。
1. Canvas を使用して画像を生成できますが、html2canvas というオープンソース ライブラリがすでに存在するため、時間を節約するために自分で作成しませんでした。
github アドレス:html2canvas
とりとめのない話はやめて、まず物事を見てみましょう。 ！ ！
ライブデモ
/** * window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1; /** * 受信したピクセル比を変換します。値は整数です*/ function parseValue(value) { return parseInt(value, 10) }; Draw Canvas */ async functiondrawCanvas (selector) { // 変換する DOM ノードを取得します const dom = document.querySelector(selector); // 計算された幅と高さDOM ノード const width = parseValue(box.width); const height = parseValue(box.height); // ピクセル比率を取得します constscaleBy = DPR();カスタムのキャンバス要素を作成します var Canvas = document.createElement('canvas') // キャンバス要素の属性の幅と高さを DOM ノードの幅と高さ * ピクセル比に設定します Canvas.width = width *scaleBy; scaleBy; // キャンバス CSS の幅と高さを DOM ノードの幅と高さに設定します。 Canvas.style.width = `${width}px`; `${height}px`; // ブラシを取得します const = Canvas.getContext('2d'); // すべての描画コンテンツをピクセル比で拡大します。 = 高さ; return await html2canvas(dom, {canvas}).then(function () { ConvertCanvasToImage(canvas, x,y) }) } /** *画像を Base64 形式に変換します*/ function ConvertCanvasToImage(canvas, x, y) { let image = new Image(); let _container = document.getElementsByClassName('container')[0]; let _body = document.getElementsByTagName('body') ) [0]; 画像.幅 = x; 画像.src = Canvas.toDataURL(image/png); _body.removeChild(_container); }drawCanvas('.container');2. 今の携帯電話は画面が高精細なので、何も処理しないとぼやけてしまいます。なぜぼやけてしまうのでしょうか？これには、デバイスのピクセル比が関係します。devicePixelRatio js は、デバイスのピクセル比を取得するために window.devicePixelRatio を提供します。
関数 DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } }このDPR機能はデバイスの画素比を取得するものですが、画素比を取得した後はどうすればよいのでしょうか。
var Canvas = document.createElement('canvas'); // Canvas 要素の属性の幅と高さを DOM ノードの幅と高さ * ピクセル比に設定します。 Canvas.width = width *scaleBy; // 設定します。 Canvas CSS の幅と高さは DOM ノードの幅と高さです。 Canvas.style.width = `${width}px`; //ブラシを取得します const context = Canvas.getContext('2d') // すべての描画コンテンツをピクセル比で拡大します context.scale(scaleBy,scaleBy);3. デバイスのピクセル比を取得した後、canvas.width と Canvas.height にデバイスのピクセル比を掛けます。この時点では、canvas.style.width と Canvas.style.height をデバイスの幅と高さに設定します。ドム。考えてみてください、なぜこれを書くのですか？最後に描画時には描画内容をピクセル比率で拡大します
たとえば、iPhone 6S デバイスの幅と高さは 375 です。したがって、1対1で描画すると、6S DPR=2の絵を見てストーリーを伝えるだけでぼやけてしまいます。
6プラスDPR=3
4. 最後に、canvas.toDataURL(image/png); を呼び出して、image.src に値を割り当てます。WeChat では写真を保存できないため、写真ファイルを生成し、WeChat 独自の長押し機能を呼び出して写真をアルバムに保存することができます。図に示すように:
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。