Vueのピット登りの旅--ポスターを動的に合成して共有する際に注意しなければならないいくつかの問題

7031 ワード
Vue
この間、共有QRコードを生成して背景図と一緒にポスターに合成する文章を書いたことがあります.Vueのピット登りの旅-共有QRコードを生成し、共有ポスターを合成する方法とピットを踏む過程があります.当時、この機能はqrcodeさんがQRコードになってQRコードを位置決めする方法で背景画像の上に置いていました.次にhtml 2 canvasを使用して、QRコードと背景図を共有ポスターにします.
先週また1つの差の少ない需要を受け取って、1枚の分かち合いのポスターを生成して、今回の違いはQRコードを出した以外に、その他の情報はインタフェースを通じて取得して、更に肝心なのはインタフェースから取得した情報の中でもう1つはピクチャーのリンクで、まずこのピクチャーとその他の情報を表示しなければなりません.さらに、ユーザーが共有できるように、背景図とともに共有ポスターに合成します.
この需要を手に入れたばかりの頃は簡単だと思っていたが、前回のようにhtml 2 canvasで合成すれば終わりで、事実は私がまだ簡単すぎることを証明した.インタフェースデータが返された後にhtml 2 canvas合成を直接呼び出す処理を行わないと、合成に問題があることがわかります.
問題の可能な表現形式は背景図が1枚しかなく,他の情報は図に合成されていない.あるいは合成した画像が空白で表示されないなど.私はその时この机能をする时多くの方法を试みたため、出会った问题も多くて、すでにどの情况がどのように间违っているのか覚えていません.
ここではhtml 2 canvasを使用して画像を合成する際に注意すべき点をいくつか列挙します.
  • 合成画像用のコンテナは必ず先に書いて、条件でレンダリングすることはできません.そうしないとhtml 2 canvasは間違っています.つまり、コンテナ要素はv-if条件で
    • をレンダリングしないでください.
  • 合成するコンテナの中にダイナミックな画像(URLで表示される画像)がある場合は、これらの画像がすべてロードされた後にhtml 2 canvasの合成方法を呼び出す必要があります.そうしないと、合成された画像に問題があります.
  • 合成するコンテナの中にダイナミックな画像(URLで表示される画像)があれば、画像のドメイン間を開いて正常に合成する必要があります.まず、ピクチャサーバがドメイン間アクセスを開始し、html 2 canvasがドメイン間機能を開始するには、
    • が必要です.
  • 合成された画像に複数の白いエッジがあることが発見された場合、html 2 canvasのoptionでbackgroundColorをnullに設定して白いエッジ
    • を除去することができます.
  • は、データの取得からページのレンダリングまでに時間がかかるため、データ要求が成功した後に少し遅れて画像の合成を開始することが望ましい.
    上はhtml 2 canvasを使うときに注意しなければならないところですが、下にコアコードが貼られています.このコードは、画像のすべてのロードが完了したと判断してからポスターの合成を開始するコードです
    //              html2canvas       
        let mulitImg = [this.signUpPoster.pic, this.signUpPoster.url]
        let promiseAll = [], img = [], imgTotal = mulitImg.length;
        for(let i = 0 ; i < imgTotal ; i++){
          promiseAll[i] = new Promise((resolve, reject)=>{
            img[i] = new Image()
            img[i].src = mulitImg[i]
            img[i].onload = function(){
              // i     
              resolve(img[i])
            }
          })
        }
        Promise.all(promiseAll).then((img)=>{
          let poster = document.getElementById('signUpPoster')
          //    ，     
          html2canvas(poster,{useCORS:true,backgroundColor:null}).then(canvas => {
            this.posterDataUrl = canvas.toDataURL('image/png')
          });
        })

    上のコードの中の変数を自分のコードの中の関連する変数に置き換えると使用できます.
    • vueコンポーネント伝値(vueコンポーネント通信)のいくつかの方式
    Vue proxyTable開発環境におけるフロントエンドとバックエンドのリアルデータドッキングの問題とドメイン間の解決