平时上传图片到网站时，大家有没有想过给这些图片加上属于自己的水印内容？
当我们将一些精心准备好的图片上传到网上某个平台时，发现有些人直接“复制粘贴”了自己的美图，将其占为己有，这个时候心里很不是滋味吧！现在是个大数据的互联网时代，你的东西未必都是“你的”，有些东西你没办法“声明”，告诉大家这是“你的”。
那么，有没有办法防止这种情况的发生呢？那也不是没有，我们可以给自己的图片添加自己专属水印就可以了，水印可以是文字也可以是特别有象征性的logo，具体怎么操作呢，有没有简单又高效的办法？下面，请跟随小编一起来看看——如何快速给图片添加文字水印
操作步骤：
第一步、打开软件后，左侧选择“添加水印”功能。
第二步、接着，点击“添加文件”选择添加图片。
第三步、如图，在类型中可选择两种水印类型，分别是文字和图片水印。
第四步、这里以图片水印为例，点击此按钮可将图片水印添加进来。
第五步、这里可直接预览效果，水印的样式是可调整的。
第六步、软件默认的文件导出位置是原文件夹，勾选“自定义”按钮可更改。
第七步、最后，直接点击“开始转换”即可。
如图，以下就是添加图片水印后的图片，效果还不错吧！

不知道目前有多少人会给自己的图片添加水印，大家都知道给图片添加水印都有什么好处吗？
图片添加水印的好处：
1、水印可以让您在共享照片时进行曝光。由于您的名字在图像上，人们会了解您。
2、水印保护您的工作。人们无法窃取你的工作，就像你的名字一样。
如果你的工作性质就是每天拍下很多照片，然后再整理一大堆的图片，这时候无妨给自己拍摄的图片添加水印，然后再上传到网站上。今天这里就来教大家如何批量给图片添加水印，方法很简单，下面一起来看看吧！
推荐工具：闪电图片格式转换器
操作步骤：
第一步、双击打开图片处理器，在左侧选择“添加水印”，然后点击“添加文件”将图片上传到软件。
第二步、如图，在类型中，选择需要的水印类型，分别有文字和图片两种可选。
第三步、这里以图片水印为例，点击添加后可根据自己的需要调整位置大小等。
第四步、软件默认的文件导出位置，选择“自定义”按钮可更换位置。
第五步、最后，直接点击“开始转换”即可。
第六步、如下图示，以下就是添加好的最终效果。

相信有不少人遇到过这种需求： 

要求对HTML页面的某个区域实现截屏为图片，以供分享保存。 

比如一个DIV中table数据是用户点击，ajax获取，dom操作，js计算等等操作生成的一组数据，这些数据用户有需求保存下来。

如图： 


截图效果类似： 


需求分析：点击导出结果，实现table投注策略导出

html代码



<script type="text/javascript" src="{$Think.LEC_URL}js/html2canvas.min.js"></script>
<div class="tabbox">
<table id="plantable">  
  <tr class="head">
    <td nowrap>序号</td>
    <td nowrap>中否</td>
    <td nowrap>倍数</td>
    <td nowrap>当期投</td>
    <td nowrap>累计投</td>
    <td nowrap>本期中</td>
    <td nowrap>本期赚</td>
    <td nowrap>净赚</td>
    <td nowrap>下期倍数</td>
    <td nowrap>余额</td>
    <td nowrap>累计中</td>
  </tr>  
  <tbody id='tbody'></tbody>
</table>
</div>
<a id="exportdata" class="ttright bghcolor" onclick="taoge();">导出结果</a>
//以下标签为辅助，各有作用
<div id="hidepic" style="display:none;"></div>
<div style="display:none;">
<canvas id="myCanvas">
</canvas>
</div>
<a style="display:none;" class="down" href="" download="downImg.jpg">下载</a>

js图片导出，图片编辑，触发下载保存等



function taoge(){
  if($('#tbody').text()==''){
    common.tipOpen('请先进行投注策略计算，再进行结果导出！',false,true,2);
    return false;
  }
  $('body').scrollTop(0); //移动端使用：此处可以弥补截图区域过大导致页面有滚动条后，产生的网页截图不完整，不可见区域截取不到
  html2canvas(document.querySelector('#plantable'),{
        allowTaint:true,
        height: $("#plantable").outerHeight() + 20
    }).then(function(canvas) {
      $('#hidepic').html(canvas);   //生成的原始canvas画布保留以备其他使用
      if(common.ismobile()){  //移动端判断
        var img = new Image();
        var canvas1=document.getElementById("myCanvas");
        // 设置宽高
        canvas1.width=canvas.width;//注意：没有单位
        canvas1.height=canvas.height;//注意：没有单位
        var ctx=canvas1.getContext("2d");      
        if(img.complete) {  
            img.src = canvas.toDataURL(); //由于图片异步加载，一定要等img加载好，再设置src属性
            img.onload = function() {  
              // 绘制图片
              ctx.drawImage(img,0,0);    
              // 绘制水印
              ctx.font="20pt Calibri";  //水印文字添加
              ctx.fillStyle = "rgba(0,0,0,0.8)";
              ctx.fillText("提示：长按保存投注记录",250,80);
              ctx.strokeText("提示：长按保存投注记录",250,80);
              //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
              document.querySelector(".down").setAttribute('href',canvas1.toDataURL());
              $('.down')[0].click(); //a标签触发下载 注意triggle('click')是不能使用的
            }
        }
      }else{
        document.querySelector(".down").setAttribute('href',canvas.toDataURL());
        $('.down')[0].click();
      }         

  });
}

cytoscape.js实现导出图片png
cytoscape.js
导出样例展示
cytoscape.js `Export `方法  [详情](https://js.cytoscape.org/#core/export)
`cy.png()` 导出png
构造方法
参数详解
注意事项
`cy.jpg()` 导出jpg(jpeg)
别名
构造方法
参数详解
注意事项
导出全局png图片
导出全局带有水印的png图片
导出部分png图片(参数控制是否包含水印)

cytoscape.js
Cytoscape.js是一个用JS编写的开源图库. 您可以使用Cytoscape.js进行图形分析和可视化展示.
Cytoscape.js允许您轻松显示操作丰富的交互式图形. 因为Cytoscape.js允许用户与图形交互, 并且允许客户端在用户事件中挂载钩子, 所以Cytoscape.js可以轻松集成到您的应用程序中, 特别是因为Cytoscape.js支持桌面浏览器, 如Chrome, 和移动浏览器, 如iPad. Cytoscape.js包括您期望开箱即用的所有手势, 包括捏合缩放, 框选择, 平移等等.
本文介绍通过Cytoscape.js, 将Cytoscape.js展示的内容导出为png图片. 内容导出同时实现全局导出与局部导出两种方式.
导出样例展示

原始页面


工具栏右侧两个按钮, 分别代表局部导出, 全图导出.
局部导出是指导出按住Shift键, 通过鼠标左键框选的区域.
全图导出是指导出图中所有完整关系网络, 包括关系网络内, 但展示区域外的所有内容.
导出时, 可以适当配置一下内容, 使导出的内容带有底部水印.




全局导出图片样式



局部导出图片样式


cytoscape.js Export方法  详情
cy.png() 导出png

This function exports the currently-rendered graph as an image, so you may not call this function on a headless instance. By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen. If the maxWidth or maxHeight options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions.
此函数将当前呈现的图形导出为图像, 因此您不能在隐式实例(headless instance, 可能有些不合适, 简单说就是未指定container的实例)上调用此函数. 默认情况下, 导出会考虑当前屏幕的像素密度, 以便图像与屏幕的质量相同. 如果指定了maxWidth或maxHeight选项, 则忽略屏幕像素密度, 以便图像能够适应指定的尺寸.
Export the current graph view as a PNG image.
以PNG格式导出当前展示的视图内容.

构造方法

构造方法 cy.png( options )

参数详解

The export options.
导出参数.


options参数详解


options The export options.

output Whether the output should be 'base64uri' (default), 'base64', 'blob', or 'blob-promise' (a promise that resolves to the blob is returned).
bg The background colour of the image (transparent by default).
full Whether to export the current viewport view (false, default) or the entire graph (true).
scale This value specifies a positive number that scales the size of the resultant image.
maxWidth Specifies the scale automatically in combination with maxHeight such that the resultant image is no wider than maxWidth.
maxHeight Specifies the scale automatically in combination with maxWidth such that the resultant image is no taller than maxHeight.




options参数详解(翻译)


options The export options.

output 输出方式, 可选选项有: 'base64uri' (默认选项), 'base64', 'blob', or 'blob-promise' (返回一个返回blob内容的promise对象).
bg 背景颜色 (默认transparent).
full 导出当前可视视图内容 (false, 默认项) 或完整视图内容 (true).
scale 一个正数, 用于指定结果图片大小的缩放比例.
maxWidth 与maxHeight 一起使用自动指定比例, 使合成的结果图片宽度不超过 maxWidth.
maxHeight 与maxWidth 一起使用自动指定比例, 使合成的结果图片高度不超过 maxHeight.



注意事项

Specifying output:'blob-promise' is the only way to make this function non-blocking. Other outputs may hang the browser until finished, especially for a large image.
指定输出方式:'blob-promise'是使这个函数不阻塞的唯一方法. 其他输出方式可能会挂起浏览器, 直到完成, 特别是对于大图像.

cy.jpg() 导出jpg(jpeg)

This function exports the currently-rendered graph as an image, so you may not call this function on a headless instance. By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen. If the maxWidth or maxHeight options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions.
此函数将当前呈现的图形导出为图像, 因此您不能在隐式实例(headless instance, 可能有些不合适, 简单说就是未指定container的实例)上调用此函数. 默认情况下, 导出会考虑当前屏幕的像素密度, 以便图像与屏幕的质量相同. 如果指定了maxWidth或maxHeight选项, 则忽略屏幕像素密度, 以便图像能够适应指定的尺寸.
Export the current graph view as a JPG image.
以JPG格式导出当前展示的视图内容.

别名

cy.jpeg()

构造方法

构造方法 cy.jpg( options )

参数详解

The export options.
导出参数.


options参数详解


options The export options.

output Whether the output should be 'base64uri' (default), 'base64', 'blob', or 'blob-promise' (a promise that resolves to the blob is returned).
bg The background colour of the image (white by default).
full Whether to export the current viewport view (false, default) or the entire graph (true).
scale This value specifies a positive number that scales the size of the resultant image.
maxWidth Specifies the scale automatically in combination with maxHeight such that the resultant image is no wider than maxWidth.
maxHeight Specifies the scale automatically in combination with maxWidth such that the resultant image is no taller than maxHeight.
quality Specifies the quality of the image from 0 (low quality, low filesize) to 1 (high quality, high filesize). If not set, the browser’s default quality value is used.




options参数详解(翻译)


options The export options.

output 输出方式, 可选选项有: 'base64uri' (默认选项), 'base64', 'blob', or 'blob-promise' (返回一个返回blob内容的promise对象).
bg 背景颜色 (默认white).
full 导出当前可视视图内容 (false, 默认项) 或完整视图内容 (true).
scale 一个正数, 用于指定结果图片大小的缩放比例.
maxWidth 与maxHeight 一起使用自动指定比例, 使合成的结果图片宽度不超过 maxWidth.
maxHeight 与maxWidth 一起使用自动指定比例, 使合成的结果图片高度不超过 maxHeight.
quality 指定映像的质量从0(低质量, 低文件大小)到1(高质量, 高文件大小). 如果没有设置, 则使用浏览器的默认质量值.



注意事项

Specifying output:'blob-promise' is the only way to make this function non-blocking. Other outputs may hang the browser until finished, especially for a large image.
指定输出方式:'blob-promise'是使这个函数不阻塞的唯一方法. 其他输出方式可能会挂起浏览器, 直到完成, 特别是对于大图像.
The JPEG format is lossy, whereas PNG is not. This means that cy.jpg() is useful for cases where filesize is more important than pixel-perfect images. JPEG compression will make your images (especially edge lines) blurry and distorted.
JPEG格式是有损的, 而PNG不是. 这意味着在文件大小比像素完美的图像更重要的情况下, cy.jpg() 非常有用. JPEG压缩将致使您的图像变得(特别是边缘线)模糊和扭曲.

导出全局png图片
/**
* 导出全局图片.
*/
exportPng() {
  let blob = this.$cy.png({output: 'blob', bg: 'transparent', 
    full: true, scale: 4, quality: 1});
  let aLink = document.createElement('a');
  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", true, true);
  aLink.download = `${new Date().getTime()}.png`;
  aLink.href = URL.createObjectURL(blob);
  aLink.dispatchEvent(evt);
  aLink.click();
},

导出全局带有水印的png图片
/**
 * 绘制水印.
 */
drawWatermark({
                canvas = null,
                words = `机密信息, 请勿外传! 时间: ${new Date().toTimeString()}`,
                width = 200,
                height = 200,
                font = "15px microsoft yahei", //水印字体设置
                fillStyle = "rgba(0, 0, 0, 0.3)", //水印字体颜色设置
                rotate = 10 * Math.PI / 180, //水印字体倾斜角度设置, 正数顺时针, 负数逆时针
                positionX = 20, // X 轴偏移像素
                positionY = 20, // Y 轴偏移像素
              } = {}) {
  let tempCanvas = document.createElement('canvas');
  [tempCanvas.width, tempCanvas.height] = [width, height];
  let tempCtx = tempCanvas.getContext("2d");
  /** 清除画布 */
  tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
  /** 文字倾斜角度 */
  tempCtx.rotate(rotate);
  /** 字体样式及颜色 */
  [tempCtx.font, tempCtx.fillStyle] = [font, fillStyle];

  let [wordsArr, index, s] = [[], 0, ''];
  for (let code of words) {
    s += code;
    code.codePointAt(0) > 255 ? index += 2 : index += 1;
    (index > tempCanvas.width / 11.25) && (wordsArr.push(s)) && ([index, s] = [0, '']);
  }
  wordsArr.push(s);

  for (let i = 0; i < wordsArr.length; i++) {
    tempCtx.fillText(wordsArr[i], positionX, positionY + i * 20, tempCanvas.width - positionX);
  }

  let ctx = canvas.getContext("2d");
  ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
},
/**
 * 导出全局图片带有水印.
 */
exportPngAndWatermark() {
  let time = new Date().getTime();
  let blob = this.$cy.png({output: 'blob', bg: 'transparent', full: true, scale: 4, quality: 1});

  let image = new Image();
  [image.id, image.crossOrigin, image.src] = [time, 'anonymous', window.URL.createObjectURL(blob)];
  image.onload = () => {
    let canvas = document.createElement('canvas');
    [canvas.width, canvas.height] = [image.width, image.height];
    let ctx = canvas.getContext('2d');
    /** 绘制水印 */
    this.drawWatermark({canvas: canvas, words: `机密信息, 请勿外传! 时间: ${new Date().toTimeString()}`});
    /** 绘制原图 */
    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
    ctx.save();
    let [aLink, evt] = [document.createElement('a'), document.createEvent("HTMLEvents")];
    evt.initEvent("click", true, true);
    [aLink.download, aLink.href] = [`${time}.png`, canvas.toDataURL("image/png")];
    aLink.dispatchEvent(evt);
    aLink.click();
  }
},

导出部分png图片(参数控制是否包含水印)

依赖于上述全局导出方法

/**
 * 导出局部图片.
 */
exportCutPng({watermark = false} = {}) {
  let unselectedVertexes = this.$cy.elements('node:unselected')
  if (!unselectedVertexes || 0 == unselectedVertexes.length) {
    return false;
  }
  let remove = unselectedVertexes.remove(); // 保留删除内容
  watermark ? this.exportPngAndWatermark() : this.exportPng();
  (remove && remove.length) && (remove.restore()); // 恢复删除内容
},


本文到此结束, 请指教.