利用canvas绘制图片加水印

wxml

<view class="container"><button bindtap="chooseImages">选择图片</button><view><image src="{{imgsrc}}" mode="aspectFit" bindtap="prevImage"></image></view>
</view>
<canvas style="position:fixed;top: 0;left: -100%" type="2d" id="Canvas"></canvas>

// index.js
// 获取应用实例
const app = getApp()
let textCtx;
Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),canIUseGetUserProfile: false,canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为falseishow: false},// 事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs'})},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}wx.onUserCaptureScreen(function (res) {console.log('用户截屏了')})let that = thislet canvas = null;const dpr = wx.getSystemInfoSync().pixelRatioconst rpx = wx.getSystemInfoSync().windowWidth// canvas定位都是以px为单位// rpx转换为px：// rpx单位大小 / 750 * wx.getSystemInfoSync().windowWidth = px单位大小let xMargin = 10 / 750 * rpx //画布侧边距let yMargin = 20 / 750 * rpx //画布上下边距let lMargin = 10 / 750 * rpx + 2 //行距let textSize = parseInt(32 / 750 * rpx) //字体大小const textWidth = parseInt((398 / 750) * rpx); // 列表定宽,超出换行显示const secondLineHeight = parseInt((38 / 750) * rpx); // 一行超出,第二行多出的高度let imgWidth = parseInt(200 / 750 * rpx) //图片宽let imgHeight = parseInt(200 / 750 * rpx) //图片高let imgMarginTop = 20 / 750 * rpx + 2 //图片高},onReady(){const query = wx.createSelectorQuery()query.select('#Canvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].nodeconst ctx = canvas.getContext('2d')this.setData({ canvas, ctx })})},// 选择图片async chooseImages() {const res = await wx.chooseImage({})const addWatermarkRes = await this.addWatermark(res.tempFilePaths[0])},// 添加水印方法 (传入图片地址)addWatermark(tempFilePath) {return new Promise( async (resolve, reject) => {// 获取图片信息const imgInfo = await wx.getImageInfo({ src: tempFilePath })// 设置canvas宽高this.data.canvas.width = imgInfo.widththis.data.canvas.height = imgInfo.height// 创建一个图片对象const image = this.data.canvas.createImage();image.src = tempFilePath;image.onload = () => {// 将图片绘制到canvas上this.data.ctx.drawImage(image, 0, 0, imgInfo.width, imgInfo.height)// 设置文字字号及字体this.data.ctx.font = '100px sans-serif'// 设置画笔颜色this.data.ctx.fillStyle = 'rgba(0,0,0,0.3)';// 绘制矩形this.data.ctx.fillRect(0, imgInfo.height - 40, 420, 40)// 设置画笔颜色this.data.ctx.fillStyle = '#ffffff';// 填入文字this.data.ctx.fillText('11111', 0, imgInfo.height - 10)// 将canvas转为为图片wx.canvasToTempFilePath({canvas: this.data.canvas,success: (res) => {this.setData({ imgsrc: res.tempFilePath})resolve(res.tempFilePath)},})}})},// 预览图片prevImage(){wx.previewImage({current: this.data.imgsrc, // 当前显示图片的http链接urls: [this.data.imgsrc] // 需要预览的图片http链接列表})}
})

利用canvas绘制图片加水印相关推荐

js：用canvas给图片加水印，签名等
场景实际工作中,我们会遇到给图片加水印的效果,比如给用户颁发电子证书要在证书上写下证书的名字,我们可以使用h5的canvas来解决这个问题. 解决例子:给证书上显示用户名字并下载 // @para ...
html2canvas给图片添加水印,小程序用Canvas给图片加水印，拼接图片，制作名片
Canvas是微信小程序中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明.canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容.下面我就将 ...
javaScript 给图片加水印
背景在很多地方,我们都可以看到,上传图片的时候,图片都会被加上默认的水印,水印的作用主要体现在以下几个方面: 1.版权保护:在商业用途的照片中添加水印可以帮助保护作者的版权,防止他人未经授权使用照片 ...
图片水印怎么加？图片加水印方法分享
相信大家在日常生活中,都会在各个平台上分享自己拍摄的照片吧,但大家在收到网友的好评和点赞的同时,是不是会因为担心图片被别人转发或者是拿去做一些不好的事情而感到烦恼呢?其实要解决这个烦恼很简单,那就是给 ...
glide加载图片闪烁_html5 canvas绘制图片
举两个新手(我)比较容易范的错误 1.图片声明了,绘制方法也ok了,但是有的时候就可以显示出来,有的时候就显示不出来 function draw(){var c=document.getElement ...
php imagick gif,利用php的imagick给gif图片加水印
尝试多次直接用GD库给gif图片加水印均未达到理想效果后,决定用imagick扩展给gif图片加水印,虽然帧数太多的情况下速度不太给力外,效果蛮理想. 开启imagick扩展,可参考http://ww ...
利用canvas绘制电子证书
利用canvas绘制电子证书 <canvas>标签是HTML中的一个图形容器,其实你也可以把它理解成为一个程序员的画图工具,它只要提供的是2D绘制功能.我们可以通过利用JavaScript ...
怎么给图片加水印？建议收藏这三招
平时在朋友圈或者其他社交平台上,经常能看到很多小伙伴分享自己的日常.不过前阵子我听朋友吐槽,有人在未告知本人的情况下,恶意盗取图片.这种行为其实发生了很多,如果你们不想让自己的创意被有心人利用,我 ...
js给base64图片加水印
一.Image加载图片,创建canvas来绘制图片 base64Img: 原始图片base64位数据. wmConfig:水印配置,参考如下. wmConfig = {font: "micr ...

利用canvas绘制图片加水印

利用canvas绘制图片加水印相关推荐

最新文章

热门文章