js初级应用之canvas制作图片水印

xiaowugui666 发布于2019-08-21 10:45 / 1832人阅读

摘要：在出现之前，项目中的图片添加水印的需求，必定是后端同学们来处理的，但是出来之后，前端终于可以站出来说，这个需求，交给我来壮哉我大前端，上周的任务就是在前端处理水印的效果，这个效果最重要的逻辑其实就几行代码，至于如何优雅的将这些简单的逻辑封装

在canvas出现之前，项目中的图片添加水印的需求，必定是后端同学们来处理的，但是canvas出来之后，前端终于可以站出来说，这个需求，交给我来！壮哉我大前端~，上周的任务就是在前端处理水印的效果，这个效果最重要的逻辑其实就几行代码，至于如何优雅的将这些简单的逻辑封装成方法并入公司的前端库，应该是一个仁者见仁智者见智的问题，在此不表。

好了，废话不表，开始干活。

在html中准备canvas环境

加载图片,这张图片有可能是已经存在的，也有可能是从后端通过ajax取过来的，不管是哪种方式，我们都需要一个img对象来保存这张图,在例子中，我们从后台取过来一张url为./img/demo.jpg的图片

var img = new Image();   
img.src = "./img/demo.jpg";

在图片加载完成之后，调用canvas的drawImage(),将我们的图片绘制在canvas的图层上面

img.onload=function(){
       var canvas=document.getElementById("myCanvas");
       var ctx=canvas.getContext("2d");
       ctx.drawImage(img,0,0);
}

注意，调用drawImage()函数之前，请确保你的图片已经加载ok，否则你会看到canvas是空白的，这是因为在图片还没有绝对加载到页面之前，你直接调用了drawImage(),而这个时候，img对象还是空的。

在canvas上绘制好图片之后，回到onload函数中，利用我们在上一步中获取的ctx对象，继续绘制水印，font属性可以自定义水印的大小以及字体，fillStyle()方法可以自定义水印的颜色以及透明度，fillStyle()则完成最后的填充以及水印的位置定位

   ctx.font="20px microsoft yahei";
   ctx.fillStyle = "rgba(255,255,255,0.5)";
   ctx.fillText("my images",100,100);

ok，如果你进行到这一步，初步的水印效果应该以及达成了，如果你还需要更多的效果，那就赶快去看canvas的api吧，上图，看看我的水印

最后，贴一个源代码，想看到效果的同学，直接拷贝我的html代码，将里面的图片url替换成你本地的url，就可以了




    
    Document

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86133.html

canvas离屏技术与放大镜实现

摘要：教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文离屏技术与放大镜实现。为了方便讲解，本文分为个应用部分实现水印和中心缩放实现放大镜什么是离屏技术学习和滤镜实现介绍过接口。这就是离屏技术。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步>>> （原文）canvas 离屏技术与放大镜实现。更多讨论或者错误提交，也请移步。利用canvas除了可以实现滤镜，还可以...

wangbjun 2019-08-23 11:36 评论0 收藏0
canvas离屏技术与放大镜实现

摘要：教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文离屏技术与放大镜实现。为了方便讲解，本文分为个应用部分实现水印和中心缩放实现放大镜什么是离屏技术什么是离屏技术学习和滤镜实现介绍过接口。这就是离屏技术。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步>>> （原文）canvas 离屏技术与放大镜实现。更多讨论或者错误提交，也请移步。利用canvas除了可以实现滤镜...

MartinDai 2019-04-23 13:26 评论0 收藏0
手摸手教你用canvas实现给图片添加平铺水印

摘要：最近项目中遇到一个需求，需要把一张图片加上平铺的水印类似这样的效果首先想到的是用完成这种功能，因为我之前也没有接触过，所以做这个功能的时候，就是一步一步的摸索中学习，过程还是挺的，接下来跟我一步步来实现这个功能以及发现一些的坑吧。最近项目中遇到一个需求，需要把一张图片加上平铺的水印类似这样的效果showImg(https://segmentfault.com/img/remote/...

崔晓明 2019-08-26 14:04 评论0 收藏0