移动端海报长按保存，只保存图片不保存文本

前端

2023-12-12 22:43:48

导语

在移动端海报设计中，经常会遇到长按保存图片的问题。但是，对于一些包含重要文本信息的海报来说，仅保存图片是不够的。因此，本文将介绍一种前端防下载解决方案，防止用户通过长按保存图片的方式获取文本信息。

问题分析

当用户长按移动端海报上的图片时，浏览器会触发 touchstart 事件，并显示一个上下文菜单。在这个菜单中，用户可以选择 "保存图片" 选项。当用户点击此选项时，浏览器会将图片下载到本地设备。

但是，如果海报中包含文本信息，则仅保存图片并不能保证文本信息也能被保存。这是因为文本信息通常以 HTML 文本的形式存储在 DOM 中，而不是图片中。因此，当用户保存图片时，文本信息将被忽略。

解决方案

为了防止用户通过长按保存图片的方式获取文本信息，我们可以采用以下解决方案：

禁用 touchstart 事件

我们可以使用 CSS pointer-events 属性禁用海报上的 touchstart 事件。这样，当用户长按海报时，浏览器将不会触发上下文菜单，从而无法保存图片。

#poster {
  pointer-events: none;
}

使用 Canvas 覆盖文本

如果我们无法禁用 touchstart 事件，我们可以使用 Canvas 在海报上创建一个覆盖层，将文本信息覆盖住。这样，当用户保存图片时，Canvas 覆盖层也会被保存，从而防止文本信息被获取。

// 创建一个新的 Canvas 元素
var canvas = document.createElement('canvas');

// 获取海报的宽高
var width = poster.offsetWidth;
var height = poster.offsetHeight;

// 设置 Canvas 的宽高
canvas.width = width;
canvas.height = height;

// 获取 Canvas 的上下文
var ctx = canvas.getContext('2d');

// 将海报绘制到 Canvas 上
ctx.drawImage(poster, 0, 0, width, height);

// 在 Canvas 上绘制覆盖层
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);

// 将 Canvas 覆盖层添加到海报中
poster.appendChild(canvas);