图片转成canvas 图片的来源

0 投票
/**

     * 根据图片生成画布

     */

    function convertImageToCanvas(image) {

        var canvas = document.createElement("canvas");

        canvas.width = image.width;

        canvas.height = image.height;

        canvas.getContext("2d").drawImage(image, 0, 0);  //把图片画到画布上

        return canvas;

    }

原始的image怎么来的?   功能就是把图片变成画布   那么图片从哪里来?

代码只有一个image的形参而已啊

以下是完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

    <meta name="viewport"

          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>场景出图</title>

    <link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    <link href="css/pretty.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>

    <script src="js/config.js"></script>

    <script type="text/javascript" src="Build/Cesium/Cesium.js"></script>

</head>

<body>

<div id="cesiumContainer"></div>

<div id='tool' style="position: absolute;left: 5px;top: 5px;">

    <div>

        <input type="button" id="custom" value="场景出图" class="button black">

    </div>

</div>

<script type="text/javascript">

    function onload(Cesium) {

        var viewer = new Cesium.Viewer('cesiumContainer');

        viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({

            url: 'https://dev.virtualearth.net',

            mapStyle: Cesium.BingMapsStyle.AERIAL,

            key: URL_CONFIG.BING_MAP_KEY

        }));

        var scene = viewer.scene;

            var promise = scene.open(URL_CONFIG.SCENE_NIAOCHAO);

             $("#custom").on("click", function () {

                    var promise = scene.outputSceneToFile();

                    Cesium.when(promise, function (base64data) {

                        download(base64data);

                    })

                })

  

    }

    /**

     * 根据图片生成画布

     */

    function convertImageToCanvas(image) {

        var canvas = document.createElement("canvas");

        canvas.width = image.width;

        canvas.height = image.height;

        canvas.getContext("2d").drawImage(image, 0, 0);  //把图片画到画布上

        return canvas;

    }

    /**

     * 下载图片

     */

    function download(base64data) {

        var image = new Image();

        image.src = base64data;

        image.onload = function() {

            var canvas = convertImageToCanvas(image);

            url = canvas.toDataURL("image/jpeg");

            var a = document.createElement('a');

            var event = new MouseEvent('click');

            a.download = (new Date()).getTime() + ".jpg"; // 指定下载图片的名称

            a.href = url;

            a.dispatchEvent(event); // 触发超链接的点击事件

        }

    }

    onload(Cesium);

</script>

</body>

</html>
10月 16 分类:  21次浏览 | 用户: 木大木大 初出茅庐 (33 分)

1个回答

0 投票

您好,图片的来源在download()这个方法里image.src = base64data; base64data来自场景出图这个接口scene.outputSceneToFile(),您可以参考API:
http://support.supermap.com.cn:8090/webgl/docs/Documentation/Scene.html?classFilter=scene#outputSceneToFile

10月 19 用户: jjz 名扬四海 (1,448 分)
...