1. ホーム
  2. Web制作
  3. HTML/Xhtml

html2canvasを用いたBaiduマップによるDom要素の画像化処理ソリューション

2022-01-25 02:58:43

課題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をより一層応援していただければ幸いです。