html2canvasを用いたBaiduマップによるDom要素の画像化処理ソリューション
課題1. Baiduの地図アプリケーションは、タイル画像(マップが綴られた画像です)、html2canvas処理、同じドメイン名の下にない画像に遭遇すると、ブラウザは、クロスドメインエラーが表示され、リバースプロキシで解決することはできません、タイル画像のドメイン名が決定されていないため、proxy_passを指定することはできません。
解決方法 Baidu Mapsの静止画処理を利用する( http://lbsyun.baidu.com/index.php?title=static )、その時点でドメイン名が決定されます( http://api.map.baidu.com ) の場合、リバースプロキシでクロスドメイン解決することができます。
// Show thumbnails without using setImageURI directly to prevent stuttering and incomplete display: solid black or solid white
FrescoUtils.showThumb(viewHolder.img_avatar, item.getFromportraitpicid(), 40, 40);
質問2. 地図上のオーバーレイはどのように表示されるのか
解決方法 Baidu Mapsの静的マップapiを見たところ、オーバーレイのカスタマイズをあまりサポートしておらず、せいぜいカスタム画像(ローカル画像ではない)を指定できる程度でした。マップを作成しましたが、コード変更の作業負荷が大きすぎるため、あきらめることにしました。そこで思いついたのが、divを使って直接オーバーレイをモック化し、静止画像レベルより少し高めに設定することです。
課題3. cssスタイルで破線の円を描いた後、生成された画像をhtml2canvasで処理すると、破線が実線になる
解決方法 キャンバスを使用して円を描画する
問題4. html2canvas処理後の生成画像に、絶対位置指定されたアイコンが表示されない。
解決方法 アイコンのz-indexをBaiduの静止画レベルより大きく設定する(追記:静止画スタイルも絶対位置決めを使用している場合)。
問題5. html2canvasで処理した後に生成された画像は、背景色が黒くなっています。
解決策:image/png を image/jpg に変更する。
public class FrescoUtils {
private static boolean isInit = false;
/**
* Show thumbnails
*
* @param draweeView draweeView
* @param url url
* @param resizeWidthDp resizeWidth
* @param resizeHeightDp resizeHeight
*/
public static void showThumb(SimpleDraweeView draweeView, String url, int resizeWidthDp, int resizeHeightDp) {
if (url == null || "".equals(url))
return;
if (draweeView == null)
return;
initialize(draweeView.getContext());
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url))
.setResizeOptions(new ResizeOptions(LjSizeUtil.dip2px(draweeView.getContext(), resizeWidthDp), LjSizeUtil.dip2px(draweeView. getContext(), resizeHeightDp)))
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(draweeView.getController())
.setControllerListener(new BaseControllerListener<ImageInfo>())
.build();
draweeView.setController(controller);
}
/**
* initialize
*
* @param context context
*/
public static void initialize(Context context) {
if (isInit)
return;
ImagePipelineConfig config = ImagePipelineConfig.newBuilder(context)
.setDownsampleEnabled(true)
.build();
Fresco.initialize(context, config);
isInit = true;
}
}
以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。
関連
最新
-
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 実装 サイバーパンク風ボタン