ホットスポットをこすって、国旗をください@微信公式

2689 ワード

javascript httml 5 先端 canvas 画像処理

今日の午後、微信のモーメンツが爆発し、全員が国旗を要求した.国慶節を迎えて新しい顔を変える活動|テンセントニュースの合成サービスの微信の中で開きます.私たちも、その中の技術について、ぐずぐずして話しましょう.
どうやって実現するか推測する

ライセンス-ユーザーのアバター

を取得

ピクチャ

にロード

ジェスチャー操作-移動スケール

合成画像

ダウンロード画像

どのように実現するかを証明します
もちろん、上は私が思っただけです.解析ノードを観察することで

は確かに画像にロードされています.アドレスはblob:先頭

である.

であるがcanvas操作はない、DOMに基づいてscale、translate等のtransfromで

をサポートする.

合成依存html2canvasライブラリ

は、長押し画像に基づいてダウンロードされる.

自分で叶えて
私の公衆番号は個人番号なので、権限がありません.だから少し変えましょう.両親には申し訳ありませんが、昨日は書き終わらずに退勤しました.テストアドレス、やっと書き終わりました.次はキーについてお話しします

アップロード画像はFileAPIを使用してファイルを取得し、URL.createObjectURL(file)はfileをurlに変換する

     //        
     uploadInput.addEventListener('change', function(){
         if(this.files.length){
             var file = this.files[0];
             avatarView.style.backgroundImage = 'url('+URL.createObjectURL(file)+')';
             // avatarView.src=URL.createObjectURL(file)
         }
     })

ジェスチャー操作e.touchesには、現在のトリガポイントがあります.transfromで合成しましたが、もちろん複数の値が座標系オフセットをもたらすので、多層で処理します.

移动是比较touchstart记录点与touchmove记录点的插值。比较好算
缩放是也是比较记录点，但是需要用勾股定理计算比例

合成图片
通过cavnas的drawImage来合成。我觉得偏移量应该要注意一下。

下载图片
通过 canvas.toDataURL('image/jpeg') 来生成base64url然后放入img。通过微信自带的长按下载来实现

总结

太忙了。好不容易写完。感觉实现上还是蛮简单的，做好就不容易了。

毛边问题
图片预加载策略
旋转的算法
自定义素材

更新时间 2019年9月26日11:34:54
https://www.lilnong.top/stati...

放大了一下倍图片解决毛边

增加了旋转功能


ctx.translate(widthHeight / 2, widthHeight / 2)
ctx.transform.apply(ctx, getComputedStyle(avatarViewRotate).transform.match(/-?[\d.]+/g))
ctx.translate(-1 * widthHeight / 2, -1 * widthHeight / 2);

互換pc
変換優先度

は技術実装のみを考慮し、大図(修復750*750)

Canvas五角星を描く

[jQuery]each遍歴集合