透かしを入れたマイクロ手紙アプレットアップロードの写真

1、JSコード:

 //圧縮の写真
  //ファイル、画像ファイル(必須)
  //のmaxWidth幅制限(必須)
  //コールバック圧縮完了コールバック・メソッド(オプション)
  圧縮(ファイルのmaxWidth、のmaxHeight、コールバック){//画像上のパスを受信します
    この= VAR。
    //元の画像情報を取得します
    wx.getImageInfo({
      SRC:ファイル、
      成功:機能(RES){
        wx.showLoading({
          タイトル:「写真がロードされています」
          マスク:真
        })
        VAR幅= res.width、高さ= res.height。
        IF(幅>のmaxWidth){
          //幅が制限を超えて
          高さ=(のmaxWidth /幅)*高さ。
          幅=のparseInt(のmaxWidth)。
        }
        IF(res.height>のmaxHeight &&のmaxHeight){
          //高さの制限を超え
          VAR比= that.data.thumbHeight / res.height; //比を計算します
          幅=(のmaxHeight /高さ)* width.toFixed(2)。
          高さ= maxHeight.toFixed(2)。
        }
        that.setData({thumbWidth:幅、thumbHeight:高}); //キャンバスの幅と高さを設定します

        roleNameInfo = that.data.RoleName +みましょう ":" + that.data.RealName。
        )(時間= util.date_timeをしましょう。
        houseLocation = that.data.HouseLocationてみましょう。

        //スケール画像圧縮
        CONST CTX = wx.createCanvasContext( 'firstCanvas')。
        ctx.drawImage(ファイル、0、0、幅、高さ); //最初の絵を描きます
        //キャンバスに入れて時間を宣言します
        ctx.setFontSize(18)//注:テキストサイズ、テキストのパディングが前に置かれなければならない、または有効になりません
        ctx.setFillStyle( '白');
        ctx.fillText(roleNameInfo、5、高さ -  62);
        ctx.setFontSize(14)。
        ctx.fillText(時間、5、高さ -  45);
        
        // ctx.fillText(houseLocation、5、高さ -  30);
        線幅= 0でした。
        //撮影した各文字列の先頭のインデックス; VAR lastSubStrIndex = 0
        {(I ++; I <houseLocation.length I = 0せて)のために
          線幅+ = ctx.measureText(houseLocation [i])と幅。
          IF(線幅> =幅-10){
            ctx.fillText(houseLocation.substring(lastSubStrIndex、I)、5、高さ -  30); //取ら延伸部
            lastSubStrIndex = I;
            私はhouseLocation.length + 2 =。

          }
        }
        IF(lastSubStrIndex <houseLocation.length){
          ctx.fillText(houseLocation.substring(lastSubStrIndex)、5、高さ -  15);
        }
        //もし(lastSubStrIndex <houseLocation.length){
        // ctx.fillText(houseLocation.substring(lastSubStrIndex、houseLocation.length  -  lastSubStrIndex)、5、高さ -  15);
        //}

          ctx.draw(偽、関数(){
            setTimeout(関数(){
              //絵画の完了コールバック
              //画像を生成します
              wx.canvasToTempFilePath({
                canvasId: 'firstCanvas'
                成功:機能(RESS){
                  wx.hideLoading();
                  wx.saveImageToPhotosAlbum({//アルバムに透かし入り画像を保存
                    filePathに:ress.tempFilePath、
                    成功(それぞれ){
                    }
                  })

                  console.log(ress.tempFilePath); // ress.tempFilePath画像はパスで透かしを入れています
                  typeof演算コールバック== "機能" &&コールバック(RESS)。
                }
              })
            }、600)
            
          })
      }
    })
  }

  キャンバス上に直接塗装した場合、小さなピットが、それはあり、開発にバグがあったため、上記の写真は、この懸念を持っていない、ctx.drawメソッドが非同期である、プロセス全体を透かし入り、その600ミリ秒の遅延を加えていますあなたが指定したページの場所に表示されている透かしとフォトアルバムや写真に透かしが引き分けを取得するために写真を保存したい場合は、しかし、あなたが遅延メソッドを追加する必要があります。

       透かし入りコンテンツがテキストである、問題はここに関与改行文字である、方法が主に使用され、ctx.measureTextは、テキスト情報のサイズを測定するために、テキストが蓄積し、単語のためにより幅、各測定サイクルの幅を返すことができますとき>時間=指定された幅、行う文字テーマ、およびキャンバスに傍受されたテキストfillTextを満たし、ここで我々がいるため、開発のため、折り返しのあるテキストのみを必要とする実際の状況に応じてその処理を実行するために必要な充填の高さ2行は、それほど高さに厳密な治療法は存在しません。

     2は、少しそれwxml下に置きます

< キャンバスのスタイル= "幅:{{thumbWidth}} PX;高さ:{{thumbHeight}} PX;ボーダー:1ピクセルベタ黒;位置:絶対;左:-1000px;上部:-1000px;" キャンバス-ID = "firstCanvas" > </ キャンバス> 

       私はすべての時間はちょうどそれはキャンバスコンテナキャリアとしてこれを使用するので、ユーザーは、アップロード透かし入り画像の後に見て、複数のニーズをアップロードするので、上記のコードは、隠されたキャンバスです。

     アップロードする他の方法についての3、

 //選択画像
  chooseImage(E){
    varが=この_this。
    wx.chooseImage({
      たSizeType:[「オリジナル」、「圧縮」] //選択画像又は画像圧縮後
      たsourceType:[「カメラ」]、//カメラへのオプションのオープンアクセス
      成功:RES => {
        //追加透かし
          res.tempFilePaths.forEach(関数(アイテム){
            _this.compress(項目、 '300'、偽、機能(RESS){
               _this.setData({
                    imagesurl:_this.data.imagesurl.concat(ress.tempFilePath)、
              /})
            });
          })

      }
    })
  }、

  これらには、私たちがコメントをお待ちしており問題がある、進歩一緒に学びます!

おすすめ

転載: www.cnblogs.com/lindaCai/p/11898234.html