canvasはカバー画像を生成します.

4946 ワード

まず、css 3に多くの使いやすい、面白いcss 3スタイルが追加されていることを知っています.今日はカバーと言います.

その使い方も複雑ではなく、バックグラウンドの使い方と同じです.mask-mageを使ってもいいです.このようにして、画像から形のある合成図を合成することができます.直接にPS処理を使う必要はありません.CSSカバー――どのようにCSSでカバーを使うか、この文章はカバーの使い方を詳しく説明しました.ここでは詳しく説明しません.今日ここで説明したいのですが、これを通じて合成画像を生成するロジックはどうなりますか?

これは2つの方法を通して、先端のJS+canvas、後端のnodejs+canvas、基本的な考え方を完成するのは同じですが、2つの方法は後者の互換性がやや良いです.

基礎の写真は合成して、全体の構想はです:まずカバーの層の大きさによって、1枚のピクチャーを形成します.次に元の写真を一定の規則に従ってカバーの大きさによって一枚の写真を切り取り、カバーの上に合成する.最後の非常に重要な設定は、global ComponeteOperationで、画像合成を設定する場合、コンビネーション操作です.

先端JS実現

utils.canvasMasking = function(img) {
    var deferred = $.Deferred();
    var newImg = document.createElement('img');

    newImg.setAttribute('crossOrigin', 'Anonymous'); //      
    newImg.src = img.src;

    //       
    newImg.onerror = function() {
        deferred.reject('       ');
    };

    //       
    newImg.onload = function() {
        var imageWidth = img.width;
        var imageHeight = img.height;
        var mask = document.createElement('img');

        mask.setAttribute('crossOrigin', 'Anonymous');
        mask.src = img.getAttribute('data-mask');

        //        
        mask.onerror = function() {
            deferred.reject('        ');
        };

        //        
        mask.onload = function() {
            var maskCanvas = document.createElement('canvas');
            var maskContext = maskCanvas.getContext('2d');

            var maskWidth = mask.width;
            var maskHeight = mask.height;

            maskCanvas.width  = maskWidth;
            maskCanvas.height = maskHeight;

            /**
             *   mask        
             */
            maskContext.drawImage(mask, 0, 0, maskWidth, maskHeight);
            //    （  ）       （  ）    
            maskContext.globalCompositeOperation = 'source-in';
            maskContext.drawImage(img, 0, 0, maskWidth, maskHeight);

            img.src = maskCanvas.toDataURL();

            deferred.resolve(maskCanvas);
        };
    };

    return deferred.promise();
};

　　
canvasは横断禁止ですので、二つの条件があります.

ピクチャのヘッダ情報は、ドメイン横断を許可するヘッダを設定しなければならない.

により作成されたイメージタグは、クロスドメイン(img.set Attribute)

を許可する必要があります.

大体の実現過程は以下の通りです.

バックエンドのnode実現

バックエンドの実現の大体の構想と先端のjs操作canvasは大体同じです.バックエンドはnode-canvasモジュールに依存する必要があります.ブラウザとほぼ完全に一致するアプリを提供しますので、シームレスに切り替えられます.詳細な実装説明は同じですが、ここでは詳しく説明しません.主にnode-canvasのインストールと正常使用が可能です.

画像を処理するので、インストールの環境に対していくつか要求があります.他のモジュールより少し高いです.まず彼はCairoに頼っています.いくつかの依存関係をインストールする必要があります.主に画像を処理するライブラリです.具体的な需要を見て、主に3つの画像を処理します.

OS
Command
OS Xbrew install pkg-config cairo libpng jpeg giflibUbuntsudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++Fedora

sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel

ソラリスpkgin install cairo pkg-config xproto renderproto kbproto xextprotoWindows
Instructions on our wiki

上表の情報はgithubから来ています.

ここで私が踏んだ穴を説明します.

初めてjpegがインストールされていないため、jpgピクチャを処理した時、ロード失敗のヒントが出ました.この場合、自分のライブラリ依存性が完全にインストールされていないかどうかを確認できます.

jpegのライブラリを2回目に設置した後、依然としてだめだと発見しました.最後に問題が発見されたのは私のjpegの倉庫です.すでにnode-canvasをインストールしてからインストールした

です.

第3回は、macにインストールされたnode-modulesをcentosのサーバにコピーしましたが、canvasは使えないことが分かりました.なぜなら、彼らの画像処理ライブラリが違っていて、node-canvas

を再インストールしなければならないからです.

以上より、
node-canvasをインストールする前提条件は、すべての依存するライブラリファイルをインストールすることです.異なる環境で、node-canvasを再ダウンロードしてインストールする必要があります.なぜなら、node-canvasは毎回コンパイルします.

他の問題点:

で画像を合成する場合、移動、スケーリングまたは回転が必要な場合はどうなりますか?canvasを使ったtranlate、scale、rotateを使って完成することができますが、ここで注意したいのはウェブページの表示効果と合成処理が一致するかどうかの問題です.

フロントエンドが複数のカバー画像を合成する場合、異なる携帯電話の互換性問題

マイクロメッセージのページはダウンロードボタンを通じて生成された画像をダウンロードできません.またcanvas.otData URL()の画像は長く保存できません.

html 2 canvasを使ってdomを画像を生成する場合は、ドメイン横断を許可する設定が必要です.proxyを使うなら、参考にして実現してもいいです.

またhttml 2 canvasで生成されたcanvas情報はbase 64をアップロードする際、413が発生する可能性があります.bodyエンティティが大きすぎるというヒントがあります.この場合、サーバーまたはサーバー言語の許可bodyのサイズに制限があるかどうかを確認します.

私は今1つの問題に出会いました.ブラウザの解像度によって展示されている大きさと私のビジネスシーンで生成された写真は違いますか?解決しています.

　　
2015-11-23追加:効果ページ

参考資料:
https://github.com/niklasvh/html2canvas
https://github.com/Automattic/node-canvas
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

PHP対象に向けたconst定数修繕子

elasticsearchを使って、ある埋め込みフィールドがnullの空の値かどうかを調べます.