zoukankan      html  css  js  c++  java
  • 前端小程序——js+canvas 给图片添加水印

    市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧

    前端小程序——js+canvas 给图片添加水印

    html:

    <canvas id="shuiyinTest">

    </canvas>

    <div>

    <input id="shuiyinText" value="" type="text"/>

    <button id="shuiyinBtn" class="mui-btn mui-btn-primary" type="button"> 点击添加水印</button>

    </div>

    画完页面就是这个样子了:

    前端小程序——js+canvas 给图片添加水印

    加上js处理:

    /*加水印*/

    function shuiyin(canvasid,imgurl,addtext){

    var img = new Image ;

    img.src = imgurl;

    img.onload = function(){

    var canvas = document.getElementById(canvasid);

    var ctx = canvas.getContext("2d");

    ctx.drawImage(img,0,0);

    ctx.font = "14px 微软雅黑";

    ctx.fillStyle = "rgba(252,255,255,0.8)";

    document.getElementById("shuiyinBtn").onclick = function(){

    var addtext = document.getElementById("shuiyinText").value;

    ctx.fillText(addtext,10,50); //选择位置

    }

    }

    }

    shuiyin("shuiyinTest","../img/member_270x210.jpg")

    下面就是见证奇迹的时刻了

    前端小程序——js+canvas 给图片添加水印

    前端小程序——js+canvas 给图片添加水印

    而且我们还可以保存到本地哦!

    前端小程序——js+canvas 给图片添加水印

  • 相关阅读:
    ultraedit 窗口布局
    Oracle之Char VarChar VarChar2
    Python之pickle
    Python之xpath
    Python常用数据结构之heapq模块
    Python实现排序算法之快速排序
    Python常用数据结构之collections模块
    New York is 3 hours ahead of California
    leetcode978
    leetcode979
  • 原文地址:https://www.cnblogs.com/zhengyan/p/7346021.html
Copyright © 2011-2022 走看看