无法从画布制作一块

Jacobian 发表于 Dev

雅可比

我希望与地图进行这种交互，以便当用户在地图上选择某个区域时，就会从该区域创建图像。我在这个小提琴中做了一个最小化和可复制的示例。最重要的部分是此裁剪功能：

function crop(img, sx, sy, dw, dh) {
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');
   canvas.width = dw;
   canvas.height = dh;
   ctx.drawImage(img, sx, sy, dw, dh, 0, 0, dw, dh);
   return canvas.toDataURL("image/png");
}

此功能在选定区域之外创建块。这是选择的样子：

但这就是我得到的结果：

所以，我的块是完全不正确的。但是更有趣的是，在某些任意计算机和某些浏览器中，块是正确的。因此，我确实需要使该代码跨平台和跨浏览器。

Tevemadar

但是问题是，从JavaScript代码看来，不可能知道此系统/浏览器参数-我的意思是初始页面缩放级别。

居然有只用它来代替和，并开始工作：window.devicePixelRatio
ratio_Wratio_H

var initialZoom = devicePixelRatio;

var map = new ol.Map({
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
  })],
  target: 'map',
  view: new ol.View({
    center: [-348792.96, 7170957.18],
    zoom: 10
  })
});

var draw = new ol.interaction.Draw({
   features: new ol.Collection(),
   type: "LineString",
   style: function (feature) {
       var style = [
         new ol.style.Style({
           fill: new ol.style.Fill({
             color: 'rgba(142,142,142,0.5)'
           }),
           stroke: new ol.style.Stroke({
             color: 'rgba(142,142,142,1)',
             lineDash: [4,4],
             width: 2
           })
         })
       ];
       return style;
   },
   geometryFunction: function (coordinates, geom) {
       if (!geom) {
           geom = new ol.geom.Polygon(null);
       }
       var start = coordinates[0];
       var end = coordinates[1];
       var mapExtent = map.getView().calculateExtent(map.getSize());

       var chunk = [start, [start[0], end[1]], end, [end[0], start[1]],start];
       var coords = [[[mapExtent[0],mapExtent[1]],[mapExtent[0],mapExtent[3]],[mapExtent[2],mapExtent[3]],[mapExtent[2],mapExtent[1]],[mapExtent[0],mapExtent[1]]], chunk];
       map.exportExtent = coordinates; // all you need
       geom.setCoordinates(coords);
       return geom;
   },
   maxPoints: 2
});

var canvas = map.getViewport().firstChild;

draw.on("drawend", function (e) {
    var image = new Image(), 
        link = document.getElementById("export-png");
   
    var topLeft = map.getPixelFromCoordinate(map.exportExtent[0]);
    var bottomRight = map.getPixelFromCoordinate(map.exportExtent[1]);
    
    var sx = topLeft[0];
    var sy = topLeft[1];
    var dw = bottomRight[0] - topLeft[0];
    var dh = bottomRight[1] - topLeft[1];
    
    image.id = "pic";
    image.crossOrigin = "anonymous";
    image.onload = function () { 
        sx = sx * initialZoom;
        sy = sy * initialZoom;
        dw = dw * initialZoom;
        dh = dh * initialZoom;
        link.href = crop(image, sx, sy, dw, dh);
        link.click();
    };
    
    image.src = canvas.toDataURL("image/png");
});

map.addInteraction(draw);

function crop(img, sx, sy, dw, dh) {
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');
   canvas.width = dw;
   canvas.height = dh;
   ctx.drawImage(img, sx, sy, dw, dh, 0, 0, dw, dh);
   return canvas.toDataURL("image/png");
}

<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map" class="map"></div> 
<a id="export-png" class="btn" download="map.png">&nbsp;</a>

代码段来自@dube的答案，我image.onload 只 initialZoom进行了修改并存储在第一行中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。