1. ホーム
  2. Web制作
  3. html5

キャンバスを使ってWeChatアバターなしの招待状ポスターを生成する

2022-01-14 15:45:59

私は最近、WeChatの中でアクセス可能なH5のページを作り、長押しで画像を共有するために友人の招待ポスター、オンライン検索情報を送信するために、解決策を思い付いた、画像を生成するためにページを描画するためにキャンバスを使用してください。

    問題:キャンバスの画像がクロスドメインになる。

    解決プロセス(空白を埋める旅)。

    1.インターネットからソリューションimg.crossOrigin = ""に示すように存在している(プロのピットピッキング、数年)。個人的に無効をテスト。非常に不可解。

    2. バックエンドサービスソリューションもオンラインにあります

   ヘッダーヘッダーの設定や、nginxのサービス設定などで、アクセスを許可する。ただし、問題点もある(最適化のため、画像の大半をサードパーティーのcdn.に保存している。これはサードパーティーの設定であり、許可するかどうか、自分でコントロールするのは難しい)

    3. 解決策 すべての画像パスを使用し、base64ストリームに変換して処理する。画像はローカル画像として保存される。これもクロスドメイン問題を回避できる。

    最後の個人的な解決策:ローカル画像を増加させる第3保存ローカルを使用していない、と最新のアップデートと同期されていないの問題のローカルとWeChatの側面があるでしょう、ではなく、ユーザーのアバター。個人的には、リモートダウンロードを使用し、出力画像を直接描画するので、画像はローカル画像になり、クロスドメインのサポートなしでキャンバスが画像を描画する問題を解決することができます。

   wxheadimg.aspxページのコードです。

If (!string.IsNullOrEmpty(Request.QueryString["data"].ToString()))
{
    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Request.QueryString["data"].ToString());
    Request.Timeout = 3000;
    WebResponse response = request.GetResponse();
    Stream stream = response.GetResponseStream();
    Bitmap image = new Bitmap(stream);
    //Save as PNG to the memory stream 
    MemoryStream ms = new MemoryStream();
    image.Save(ms, ImageFormat.Png);
    //re-export the header image
    BinaryWrite(ms.GetBuffer());
    Response.End();
    ms.Close();
    Response.Close();
    stream.Close();
}

   canvas 描画ページの参照。

    キャンバスの描画コードも一緒に。

<script type="text/javascript">
window.onload = function ()
{
    var IMAGE_URL;
    function takeScreenshot(){
        var shareContent = document.getElementById('shareMember');// the (native) DOM object of the package that needs to be screenshot
        var width = shareContent.offsetWidth; //Get the dom width
        var height = shareContent.offsetHeight; //Get the height of the dom
        var canvas = document.createElement("canvas"); //create a canvas node
       var scale = 1; //define any magnification support fractional
        canvas.width = width * scale; //define canvas width * scale
        canvas.height = height * scale; //define the height of the canvas * scale
        canvas.getContext("2d").scale(scale, scale); //get context, set scale
       //var rect = shareContent.getBoundingClientRect();//get the offset of the element relative to the inspection
        //canvas.getContext("2d").translate(-rect.left, -rect.top);//set the context position, the value is the negative offset relative to the viewport, let the image reset
        var opts = {
            scale:scale, // the added scale parameter
            canvas:canvas, // custom canvas
            logging: true, // logging switch
            width:width, // original width of the dom
            height:height, // the original height of the dom
            backgroundColor: 'transparent',
        };
        html2canvas(shareContent, opts,{useCORS:true,logging:true}).then(function (canvas)
        {
            IMAGE_URL = canvas.toDataURL("image/png");
            $('.copyImage').attr('src',IMAGE_URL);
        })
    }
    takeScreenshot();
}
</script>

   ページコード :

    <div class="shareBox" id="shareMember">
        <div class="top">
            <div class="logo"><img src="wxheadimg.aspx?data=WeChathead URL"/></div>
        </div>
        <div class="middle">
            <img src="makeQRCode.aspx?data=2dimensional code content" class="qrcode" />
        </div>
        <img src="" class="copyImage">
    </div>
jpg.shareBox{position:relative}
.shareBox .copyImage{position:absolute;top:0px;left:0px;z-index:999;opacity:0;height:666px;width:666px;}

概要

上記は、WeChatアバターがないWeChatアバターの問題を含む招待ポスターを生成するためにキャンバスを使用して、私はそれがあなたを助けることを願って、何か質問がある場合は、私にメッセージを残して、私は速やかに皆に返信されます。あなたが何か質問がある場合は、私にメッセージを残してください、私はタイムリーにあなたに返信されます。ここでも、スクリプトホームサイトのサポートに非常に感謝します
この記事がお役に立つと思われる方は、ご自由に転載してください!ソースを明記してください!ありがとうございます。