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

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

gitブランチポリシー

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

新しい機能の追加

githubホットスポット登録

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

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

例:feature/100-download-image

機能開発完了

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

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

関連議題の緊密な処理

配備時

marster支路への発展要請

その他時点付与Tag

github pages使用中、自動変更

その他

commitでメッセージにホットスポット番号(#ホットスポット番号)を言及

自分の提出履歴をホットスポットウィンドウで確認できます.

ホットスポットに合った提出履歴を検索しやすい.

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;
    }

変換、ダウンロード、およびコピーの方法については、次のサイトを参照してください.
JSキャンバスクリップボードのコピー
SVG to Png and download

結果

クリップボードにコピーする機能はまだマスターバージョンにはないので、サイトにはまだ機能していません.

の最後の部分

今は機能的ですか?ある程度実装されているので、他の面ではなく機能に重点を置きます.

設計とCSS応用

ユーザー利便性の向上

Test? 導入

ブラウザに対する互換性チェック

ソースコード整理と分離