开心每一天

Appearance

一些网站的在线设计去水印 ​

Logo 设计去水印 ​

  • 按 F12 进入控制台，找到源代码；
  • 选择控制台，然后 Ctrl + F 打开搜索，输入：watermark;
  • 删除掉所有 class="watermark" 的样式。

导出 Logo 图片 ​

  • 放大后截屏
  • 使用代码导出

以下为代码导出：

注意：存在图片时，图片会模糊，不存在图片时则正常。

F12 进入浏览器控制台，然后复制以下代码，然后回车即可触发自动下载。

js
// 动态导入 JavaScript ES 6 模块
import('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.esm.js')
// 解构
.then(({ default: html2canvas }) => {
    // debugger;
    // let element = document.getElementById('stage_canvas');
    let element = document.getElementsByClassName('svg-canvas-wrapper')[0];
    console.log(element);
    // 使用html2canvas将DOM元素转换为画布
    // 整体图片像素不清：可使用html2canvas中的scale与dpi配置来进行放大
    html2canvas(element, {
        //放大。
        scale: 2, 
        // 处理模糊问题
        dpi: 300,
        // 允许跨域
        useCORS: true,
        // 允许画布被污染（当使用跨域图像时）
        allowTaint: true,
        // 设置背景颜色为透明
        backgroundColor: 'transparent',
    }).then(canvas => {
        // 将画布转换为base64编码的图像数据
        const imageData = canvas.toDataURL('image/png');
        // 自动下载生成的图像
        const downloadLink = document.createElement('a');
        downloadLink.href = imageData;
        downloadLink.download = 'captured.png';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    }).catch(error => {
        console.error('Error capturing the element:', error);
    });
}).catch((error) => {
    // 捕获错误
    console.error('Error capturing the element:', error);
});

邀请函去水印 ​

F12 进入浏览器控制台，找到以下代码（可搜索：watermark）：

在浏览器控制台右侧的 css 管理窗口，找到这个样式，并去掉前面的对勾：background-image: url("//eyuankupub-cdn-oss.chuangkit.com/sys/front/ckt-watermark-v3.png") !important;

html
<div style="background-size: 100% !important;background-image: url(&quot;//eyuankupub-cdn-oss.chuangkit.com/sys/front/ckt-watermark-v3.png&quot;) !important;display: block !important;visibility: visible !important;position: absolute !important;opacity: 1 !important;top: 0px !important;left: 0px !important;width: 100% !important;height: 100% !important;transform: none !important;" class="canvas"></div>

导出邀请行图片 ​

  • 放大后截屏
  • 使用代码导出（前端受限，需要研究代码）