1. Ideas
There are currently two known methods for adding watermarks to slice layers:
One is similar to the hypergraph slice service. The slices returned from the service are watermarked, as shown in the figure below. But this method is not realistic for ordinary development.
The other is to wait for the slice to be sent back to the front end, and perform secondary processing on the slice at the front end. This article mainly describes how to process the returned slice.
Second, the process
First prepare a transparent picture for watermarking, as shown in the figure below, and then convert the picture to base code for easy calling in the code.
Core method
Load callback method by monitoring slice
-
Get the loaded slice, and then create a canvas with canvas according to the size of the slice;
-
Draw the picture corresponding to the sliced src onto the canvas, so that a canvas with the same content as the src picture is obtained;
-
Superimpose the pre-prepared watermark picture onto the canvas by tiling, and then output the canvas as a picture, so that the picture with the superimposed watermark can be obtained;
- Finally, replace the original slice picture with the processed output picture, and you can get the effect of adding watermark;
var img = new Image();
img.src = "data:image/png;your img"
var source2 = new ol.source.ImageArcGISRest({
crossOrigin: "anonymous", // 需要开启才能对切片进行操作
url: "your url",
})
source2.on("imageloadend", function (evt) {
// var image = evt.tile.getImage();
var image = evt.image.getImage(); // 获取切片
canvas = document.createElement('CANVAS'); // 创建画布
canvas.width = image.width;
canvas.height = image.height;
canvas.style.width = image.width + 'px';
canvas.style.height = image.height + 'px'; // 根据切片大小设置画布尺寸
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height); // 将切片图片绘制到画布上
ctx.rect(0, 0, image.width, image.height);
ctx.fillStyle = ctx.createPattern(img, "repeat"); // 平铺预先准备好的水印
ctx.fill();
image.src = canvas.toDataURL("image/png"); // 将添加完水印的图片绑定到切片上
});Layer loading method
Take the arcgis service as an example, you can use the Tile method to load tile slices, or you can use Image to load pictures directly
In the above core code example, the Image method is used for processing, and the image method is used for loading. The background service will directly return an image close to the current interface size.
The effect of adding a watermark can also be achieved by directly operating the entire picture, but this will cause a problem. Every time the picture in the cache is not enough to provide the view of the view, the service will be requested, and the request will be returned again. If the watermark is operated on the close picture, the watermark will be calculated and tiled from the upper left corner of the new picture, which will cause the position of the watermark to always be unchanged relative to the screen, instead of moving with the slice.
This effect will be obvious if it is replaced with a blank layer, that is, as long as a new slice is obtained, the watermark will refresh back to its original position, which is consistent with the relative position of the screen. In other words, as long as the interface refreshes the picture, the layer watermark will return to the position shown in the figure below.
The above effect is obviously not the desired effect of the watermark layer. It is recommended to use tile slices for loading.
var source2 = new ol.source.TileArcGISRest({
crossOrigin: "anonymous",
url: "your url",
})
source2.on("tileloadend", function (evt) {
// source2.on("imageloadend", function (evt) {
var image = evt.tile.getImage(); // 获取切片
// var image = evt.image.getImage(); // 获取切片
canvas = document.createElement('CANVAS'); // 创建画布
canvas.width = image.width;
canvas.height = image.height;
canvas.style.width = image.width + 'px';
canvas.style.height = image.height + 'px'; // 根据切片大小设置画布尺寸
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height); // 将切片图片绘制到画布上
ctx.rect(0, 0, image.width, image.height);
ctx.fillStyle = ctx.createPattern(img, "repeat"); // 平铺预先准备好的水印
ctx.fill();
image.src = canvas.toDataURL("image/png"); // 将添加完水印的图片绑定到切片上
});The slices loaded by the tile method are slices of the same size. If the horizon changes, the base map needs to be refreshed. You only need to request the slices where the horizon changes, and then operate on the new slices.
And the watermark operation is performed on each slice, so the relative position of the watermark is always bound to the slice, so the watermark will not be brushed back.
Projection influence
The above example is based on the situation that the projection of the view is consistent with the projection of the layer. If the projection of the view is inconsistent with the projection of the layer , processing the image in the callback event will cause the image to have a split effect.
It is speculated here that further processing should be performed after the slice is loaded, so the image is missing. This problem can be skipped by publishing a new empty layer consistent with the projection of the view, monitoring the empty layer, setting the display and hiding effect of the empty layer, and realizing that multiple layers share a watermark layer. Effect, avoid operating on each layer, consuming too much performance.
