位置決め用添付画像生成器-2

7956 ワード

Toyproject web テキストリンク

プロジェクトサイト
今回は、このプロジェクトで使用したGitブランチポリシーと、前回実施した機能について説明します.

gitブランチポリシー

git-flowポリシーを参照して、master、development、featureブランチのみを実行します.
分岐戦略を体験するために設計されています.
Git-flowを使っています。
Git分岐タイプと使い方

新しい機能の追加

githubホットスポット登録

developmentブランチにfeatureブランチを作成

ブランド名:feature/[ホットスポット]—[実装機能]

例:feature/100-download-image

機能開発完了

feature分岐開発分岐としてのpull request

黙吉後、featureブランチを削除する.

canvasからSVGに変更

SVGは、w 3 cにより作成されたバックエンド画像規格であり、バックエンド(ベクトル)画像を表す.
使用svg.js作業を行いました.
スケーラブルベクトルグラフィックス
Canvas VS SVG
Textとrectが含まれています.
rectは背景色に用いられ、Textはユーザが入力した内容を表示するために用いられる.
svgに含まなければならない要素が変化した場合、予め含まれているのではなく、動的に生成された方法で変更する必要がある場合があります.

 <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink" 
      id="imagePreview" height="200" width="400">
    <rect width="100%" height="100%" fill="#ffffff" id="imageBackground" />
	<text id="imageText" dominant-baseline="middle" text-anchor="middle">
    </text>
   This browser doesn't support svg 🙅‍♂️
</svg>

画像のダウンロードとクリップボードのコピーを実現

SVGからcanvasへの変換過程は同じであるため,convertImageAfterAction関数からパラメータとしてコールバック関数を受信して処理することを実現した.

    function convertImageAfterAction(callback) {
      ... 생략 ...
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            DOMURL.revokeObjectURL(url);
            
            callback(canvas);
        };
        img.src = url;
    }