キャンバスを使ってWeChatアバターなしの招待状ポスターを生成する
私は最近、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アバターの問題を含む招待ポスターを生成するためにキャンバスを使用して、私はそれがあなたを助けることを願って、何か質問がある場合は、私にメッセージを残して、私は速やかに皆に返信されます。あなたが何か質問がある場合は、私にメッセージを残してください、私はタイムリーにあなたに返信されます。ここでも、スクリプトホームサイトのサポートに非常に感謝します
この記事がお役に立つと思われる方は、ご自由に転載してください!ソースを明記してください!ありがとうございます。
関連
-
html5 直交ハート型曲線の実装
-
サンプルレートとビットレートを設定してmp3オーディオを録音するhtml5
-
videoタグによるストリーミング読み込みのhtml5実装
-
html5 自動再生 mov形式動画サンプルコード
-
人気のあるいくつかのHTML5 UIフレームワークの比較(要約)
-
QRコードポスター付きキャンバス生成の落とし穴記録
-
高さ調整可能なテキストエリアを作成するサンプルコード
-
ディテールキャンバスの描画Webフォントいくつかのメソッド
-
window.openがブラウザにブロックされている場合の解決策を詳しく説明します。
-
html2canvas.jsを使用してページのスクリーンショットを撮影し、表示またはアップロードするサンプルコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
モバイルHTML5開発ツール vconsoleの詳細解説
-
メソッドステップを構築するフレームワーク「AmazeUI」(グラフィック)
-
ウェブサイトパフォーマンスのための画像読み込みを遅らせる5つのコツ(要約)
-
Webフォント読み込み方式最適化のまとめ
-
SVG描画をHTMLページに持ってくる実装
-
HTML5 における scroll-to-bottom イベントの問題を解決する方法
-
キャンバス画像分割効果の実装
-
HTML5でWeb Notificationのデスクトップ通知を実装する方法
-
HTML5新フォームコントロールとフォームプロパティのサンプルコード詳細
-
N種類のキャンバスエクスポートイメージのクロスドメインポーズサマリーのロックを解除する