前端小程序——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处理:

/*加水印*/

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")

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

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

时间: 2024-11-05 19:28:02

前端小程序——js+canvas 给图片添加水印的相关文章

.net core 3.1 webapi后端接收钉钉小程序post的文件/图片

原文:.net core 3.1 webapi后端接收钉钉小程序post的文件/图片 世上本没路:走的人多了,便成了路. dd.uploadFile({ url: '请使用自己服务器地址', fileType: 'image', fileName: 'file', filePath: '...', success: (res) => { dd.alert({ content: '上传成功' }); }, }); 这就是官网上的例子,没有后端的.但是我猜这是用"Form"进行pos

微信小程序之canvas画图生成图片下载

要实现的功能:点击朋友圈按钮弹出分享图片:点击保存分享图片保存到手机实现代码:1.分享按钮点击事件 /** * 分享 */ weixinShare:function(){ var that = this; console.log(111); share.canvasImg((res)=>{ console.log(222); that.setData({ imagePath: res.tempFilePath, bgShare:false, left:43 }); }); } 2.生成图片 /*

前端--小程序的学习(二)

今天呢,我们一起来看看小程序的wxml,其实呢就跟前端写html一样的,只不过这里标签不一样,并且头部head部分也不用写,因为小程序内在都包好了. wxml基本由这几个标签 数据绑定类似于Vue的数据绑定("{{value}} "绑定数据),数据初始化时在js文件的Page()函数里的data对象中. 以下是常用的标签: view标签:视图标签,默认换行,类似于div标签,块级元素: icon标签:展示图标 type属性用于展示什么样的图标如:clear,success,info,w

微信小程序多张image图片排列有空隙解决方案

上个项目是卖东西的,商品详情传的组图,排上去后发现每张图片下有大概10+rpx的下边距,显得很不好看.查了一下貌似是小程序的默认样式.没找到解决方案,看到有说用微信编辑器传图的,好像很麻烦就没去试,自己琢磨了两种方法. 原本不做处理的样子: .det-pics-w image { width: 100%; min-height: 630rpx; } .det-pics-w { position: relative; } 第一种解决方案:flex .det-pics-w image { width

小程序开发二三事--图片错误显示默认图

小程序的image组件不像普通html 的image,没有onerror属性,不过有个binderror回调方法.却不像onerror="this.src='/static/img/fmdefault.png'"来的方便. binderror 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}; 当图片错误时,调用binderror方法,然后去改变image的src绑定的值. <ima

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSe

微信小程序 JS 逻辑层

丰富的API: https://developers.weixin.qq.com/miniprogram/dev/api/ 全局逻辑(app.js) 调用APP()函数,调用生命周期函数 一.生命周期函数:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. 1. onLaunch : 当小程序

小程序真机调试图片可以成功上传,但是线上版本和体验版手机上上传老保图片报错?

配置好上传的域名 上传的图片的域名后来更换了但是小程序后台没换,重新加下就好了. 灵感链接: https://developers.weixin.qq.com/community/develop/doc/00004449ea460025fde8f3ebb56c00 原文地址:https://www.cnblogs.com/pikachuworld/p/11565497.html

wx小程序用canvas生成图片流程与注意事项

1.需要画入canvas的 图片都需要先缓存到本地 let ps = [] ps.push(that.loadImageFun(this.statusInfo.avatar_url, "headImg")) Promise.all(ps).then(res => { // 画图 }) loadImageFun(url, index) { let _this = this return new Promise((resolve, reject) => { wx.downloa