HTML要素をイメージとしてダウンロードする方法.訪問カードデザイナー

こんにちは、今日の記事では、素晴らしい訪問カードデザイナーを作成することを学びます.あなたが会社のロゴ、そのスローガン、ウェブサイトのリンクとサポートのメールを追加することができます.また、訪問カードの背景を変更することができます.また、あなたのシステム上のデザインの訪問カードをダウンロードすることができます最高のもの.
デモを参照したり、より良い理解のための完全なコーディングチュートリアルビデオをしたい.下記のチュートリアルを見ることができます.

ビデオチュートリアル

I appreciate if you can support me by subscribing my youtube channel.

コード
このプロジェクトには、3つのファイルがあります.index.html , style.css and app.js .
したがって、HTMLの基本的な構造から始めるstyle.css and app.js ファイルを指定します.その後、見出しのH 1要素を作成します.

<h1 class="heading">design your <span>visiting card</span></h1>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background: #f6f6f6;
    font-family: 'roboto', sans-serif;
    padding: 50px;
}

.heading{
    text-align: center;
    text-transform: capitalize;
    font-size: 70px;
    font-weight: 400;
    margin-bottom: 5vh;
}

.heading span{
    color: #467aff;
}

出力

さあ、メイクdiv 左側のカードと右側のデザインオプションを含む要素.メイクするdiv カード要素も.

<div class="main">
    <div class="card">

    </div>
</div>

.main{
    display: flex;
    padding: 50px;
    flex-wrap: wrap;
}

.card{
    width: 45%;
    margin-right: 5%;
    min-width: 500px;
    height: 300px;
    background: #fff;
    position: relative;
    border-radius: 5px;
    padding: 20px;
    background-image: url(img/img1.png);
    background-size: cover;
    overflow: hidden;
}

.card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
}

出力

現在、カード要素の中にロゴ容器を作ります.

<div class="logo"></div>

.logo{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    margin: 5px auto;
    background-image: url('img/logo.png');
    background-size: cover;
}

もちろん、カード要素の中にいくつかの入力を入力します.

<input type="text" class="name" maxlength="30" placeholder="business name">
<input type="text" class="slogan" maxlength="50" placeholder="business slogan">

<input type="text" class="website-link" placeholder="website">
<input type="text" class="email" placeholder="email">

input{
    position: relative;
    text-align: center;
    outline: none;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    background: none;
    width: 100%;
    border: none;
    font-size: 30px;
    color: #fff;
    transition: .5s;
}

::placeholder{
    text-transform: capitalize;
    color: #fff;
}

.slogan{
    font-size: 20px;
    margin: 5px 0;
}

input:focus{
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.website-link, .email{
    font-size: 16px;
    opacity: .75;
    position: absolute;
    text-align: left;
    width: 50%;
    height: auto;
    bottom: 10px;
}

.website-link{
    left: 20px;
}

.email{
    right: 20px;
    text-align: right;
}

出力

すごい!我々は、カードの設計で行われます.あなたがすぐに入力ボックス上の詳細を入力することができます.今すぐ右側にオプションを作りましょう.

<!-- settings -->
<div class="setting">
    <input type="file" accept="*image" id="upload" hidden>
    <label for="upload" class="btn upload">upload logo</label>
</div>

上のコードではdiv 元素内部main 要素.そして、この中にsetting 要素.アップロード入力をしました.hidden 属性を使用して入力を非表示にします.

.setting{
    width: 50%;
}

.btn{
    font-size: 16px;
    text-transform: capitalize;
    padding: 10px 20px;
    border-radius: 5px;
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn:focus, .btn:hover{
    background-color: rgba(0, 0, 0, 0.1);
}

出力

今コースの背景画像を作る.

<!-- backgrounds -->
<div class="backgrounds">
    <img src="img/img1.png" class="active" alt="">
    <img src="img/img2.png" alt="">
    <img src="img/img3.png" alt="">
    <img src="img/img4.png" alt="">
    <img src="img/img5.png" alt="">
    <img src="img/img6.png" alt="">
</div>

.backgrounds{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px 0;
}

.backgrounds img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: .5s;
    border: 0;
    cursor: pointer;
}

.backgrounds img:hover{
    opacity: 0.5;
}

.backgrounds img.active{
    border: 5px solid #fff;
}

出力

今私たちのスタイルで行われます.今すぐダウンロードのためのボタンを作成します.またアンカーリンクを作るが、tそれに任意のテキストを与える.

<a href="#" id="link" download="visiting card.png"></a>
<button class="btn download-btn">download design</button>

The above code is inside .setting element.

download 属性を使用してダウンロードリンクを設定します.ダウンロード属性の値はダウンロードした画像のファイル名です.私たちはlink ダウンロード用要素.

出力

さあ早速JSを書きましょう.オープンapp.js ファイル.必ずインポートしてくださいindex ファイル.
まずロゴを機能アップロードしましょう.選択upload 入力とlogo 要素.

// setting up logo
const uploadBtn = document.querySelector('#upload');
const logo = document.querySelector('.logo');

次にchange イベントupload 入力.

uploadBtn.addEventListener('change', () => {
    if(uploadBtn.files && uploadBtn.files[0]){
        let reader = new FileReader(); // init the file reader

        reader.addEventListener('load', () => {
            // reader.result will return the src of the uploaded image
            logo.style.backgroundImage = `url('${reader.result}')`;
        })

        reader.readAsDataURL(uploadBtn.files[0]);
    }
})

インサイドchange イベント.if(uploadBtn.files && uploadBtn.files[0]) アップロードされたファイルの存在をチェックする行.この条件はファイルがアップロードされたときにのみ有効です.
それから、私たちがファイルを得たあと、我々はそのイメージファイルを読むためにファイルリーダーを必要とします.それで、我々はこれを使っています.let reader = new FileReader(); リーダーを初期化した後、Loadイベントを追加し、logo そこの要素の背景.

reader.addEventListener('load', () => {
            // reader.result will return the src of the uploaded image
            logo.style.backgroundImage = `url('${reader.result}')`;
        })

そして最後にはreader.readAsDataURL(uploadBtn.files[0]); この線は読者が読まなければならないことを教えている.この場合、ファイルの配列に最初にアップロードされたファイルが欲しいです.
すごい!アップロードのロゴが動作しています.今、我々はユーザーがカードの背景を変更できるようにする必要があります.すべての背景の画像要素を選択します.カード要素も.

const bgs = document.querySelectorAll('.backgrounds img');
const card = document.querySelector('.card');
let activeBg = 0; //default background

activeBg 現在選択されているバックグラウンドインデックスを保存します.このため、結果を達成するためにループを少なく実行できます.
今すぐ使用forEach ループするbgs 追加click すべての画像にイベント.その変化の中でトグルactive クラスを変更し、activeBg 値.

bgs.forEach((item, i) => {
    item.addEventListener('click', () => {
        bgs[activeBg].classList.remove('active');
        item.classList.add('active');
        card.style.backgroundImage = `url('${item.src}')`;
        activeBg = i;
    })
})

今最後に、我々は機能をダウンロードする必要があります.このために使用しますhtml2canvas 図書館.このライブラリは、HTML要素をキャンバスに変換するのに役立ちます.そして、その後、我々はキャンバスをダウンロードすることができます.
を忘れないでくださいhtml2canvas CDNインサイドindex ファイル.

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

Add this before app.js script.

さて、選択download ボタンapp.js . 関数を作成するexportCard これはカードをエクスポートします.を呼び出し、exportCard クリック時の機能download ボタン.

// download button
let downloadBtn = document.querySelector('.download-btn');

let exportCard = () => {

}

downloadBtn.addEventListener('click', () => {
    exportCard();
})

今すぐ内側のコードexportCard .

let exportCard = () => {
    html2canvas(card)
    .then(canvas => {
        let link = document.getElementById('link');
        link.href = canvas.toDataURL();
        link.click(); // click on the link
    })
}

html2canvas はライブラリのメソッドです.キャンバスに要素を覆っている.このメソッドの最初の引数はelement . この場合私はcard 要素.その後、キャンバスを使用して取得then メソッド.この中でlink 我々が作った要素HTML ファイル.設定するhref to canvas.toDataURL() (これはキャンバスのsrc/linkを返す).そして最後に電話でリンクをクリックlink.click() .
サイトを実行してダウンロードしようとすると、おそらくコンソールでこのエラーが表示されます.

エラー

さて、ブラウザがキャンバスをリンクに変換するのを止めているので、このエラーは来るだけです.ユーザーシステムのローカルファイルにアクセスできないので.あなたがこのサイトを主催するならば、あなたは誤りを見ません.しかし、ビデオチュートリアルではlocalhost . ではサーバを作りましょう.

ランnpm init ノードのアプリケーションを初期化するコマンドを端末で.

その後、実行npm i express.js nodemon 取り付けるepxress and nodemon 図書館.

今すぐあなたのpackage.json . 変更するmain to server.js . そして、scripts .

"main": "server.js",
"scripts": {
    "start": "nodemon server.js"
  },

今すぐ作成server.js ディレクトリ内のファイル.サーバをコード化します.

サーバ.js

const express = require('express');

const app = express();
app.use(express.static(__dirname));

app.get('/', (req, res) => {
    res.sendFile('index.html');
})

app.listen(3000, () => {
    console.log('listening......')
})

実行してサーバーを起動しますnpm start 端末のコマンド.
すごい!現在、サイトはlocalhost上で動作しています.そして今あなたはデザインをダウンロードすることができます.それは今日の人々のためです.私は、あなたが各々とすべてを理解したことを望みます.あなたが疑いを持っているか、私が何かを逃したならば、私にコメントで知らせさせました.

あなたが役に立つかもしれない記事

あなたが私のYouTubeチャンネルを予約することができるならば、私は本当に感謝します.私は素晴らしいWebコンテンツを作成します.
Source Code
あなたの寄付は、本当に私にこのようなより驚くべきチュートリアルをする動機を与えます.サポート・オンpatreon , Buy me a coffee , Donate me on paypal
読書ありがとう.