html2canvas给图片添加水印,小程序用Canvas给图片加水印,拼接图片,制作名片
Canvas是微信小程序中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明。canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容。下面我就将介绍一下怎么给图片添加水印,图片的拼接,怎么制作个性名片以及制作一个涂鸦的画板。
水印
水印的添加总的来说可以简单的分为三步来走,第一步先完成一个画布的创建,第二步在画板上画出你想添加水印的图片,第三步画上你要添加的水印文字。
创建画板
需要注意的是canvas-id的唯一性,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作。这里我们将宽度和高度设置成动态的,根据图片的宽高来确定画板宽高的比例。 然后我们需要在.js文件中进行操作:
var ctx= wx.createCanvasContext('myCanvas')
var that = this
//选择图片,这里我们设置先选择一张。
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
var tempFilePaths = res.tempFilePaths
//获取图片基本信息
wx.getImageInfo({
src: tempFilePaths[0],
success: function (res) {
var width = res.width
var height = res.height
//获取屏幕宽度
let screenWidth = wx.getSystemInfoSync().windowWidth
//处理一下图片的宽高的比例
if (width >= height) {
if (width > screenWidth) {
width = screenWidth
}
height = height / res.width * width
} else {
if (width > screenWidth) {
width = screenWidth
}
if (height > 400) {
height = 400
width = res.width / res.height * height
} else {
height = height / res.width * width
}
}
that.setData({
imageWidth: width,
imageHeight: height,
})
ctx.drawImage(res.path, 0, 0, width, height)
ctx.rotate(obj.rotate * Math.PI / 180)
for (let j = 1; j < 12; j++) {
ctx.beginPath()
ctx.setFontSize(14)
ctx.setFillStyle('white')
ctx.fillText('你要添加的文字', 0, 50 * j)
for (let i = 1; i < 12; i++) {
ctx.beginPath()
ctx.setFontSize(14)
ctx.setFillStyle('white')
ctx.fillText("你要添加的文字", (15 + (14-1)*"你要添加的文字".length) * i, 50 * j)
}
}
for (let j = 0; j < 12; j++) {
ctx.beginPath()
ctx.setFontSize(obj.fontSize)
ctx.setFillStyle(obj.color)
ctx.fillText("你要添加的文字", 0, -50 * j)
for (let i = 1; i < 12; i++) {
ctx.beginPath()
ctx.setFontSize(14)
ctx.setFillStyle('white')
ctx.fillText("你要添加的文字", (15 + (14-1)* "你要添加的文字".length) * i, -50 * j)
}
}
ctx.draw()
}
})
}
})
图片拼接
图片拼接思路就更加简单了,说白了就是在一个画布上咱们连续地画几张图片再将它导出来就OK了。 创建画布我就不说了,还是和上面的一样,width和height也是动态的。我们得根据获取的图片来动态的计算出它的宽高,这里主要是计算它的高度,以保证我们弄出来的图片是不会变形的。
// 这里的图片数组可以从相册中选取出来,也可以从上一个页面传过来,但是要注意传的时候得转成JSON再传
for(var i = 0; i < imagesArr.length; i++){
var imageUrl = imagesArr[i]
wx.getImageInfo({
src: imageUrl,
success: function (res) {
var width = res.width
var height = res.height
// downNum是一个对象,用来计数
obj.downNum = obj.downNum + 1
let sw = wx.getSystemInfoSync().windowWidth
if(width > sw){
width = sw
height = height / res.width * width
}
// heightForCanvas也是一个对象,用来记录总的高度
ctx.drawImage(res.path, (sw-width)/2.0, obj.heightForCanvas, width, height)
obj.heightForCanvas = obj.heightForCanvas + height
that.setData({
height: obj.heightForCanvas
})
// 全部drawImage调用完毕后再调用draw()
if (obj.downNum == imagesArr.length){
ctx.draw()
}
}
})
}
个性名片
个性名片其实就是对画布的一个综合整体的运用,同样的技巧你也可以用来制作海报什么的。还是说一下思路,首先我们也是创建画布,然后给它添加一个贴切你主题的背景图,添加背景图最需要注意的还是获取图片的尺寸防止其变形。背景添加了我们就需要给它添加展示的内容了,添加文字添加图片等等。这里说一下怎么给图片切圆角,首先我们需要用canvas画一个圆,然后再对其进行裁剪,因为一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内。
onLoad: function () {
var that = this;
var ctx = wx.createCanvasContext('myCanvas')
// 先保存状态 已便于画完圆再用
ctx.save();
// 开始绘制
ctx.beginPath();
//先画个圆
ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
// 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内
ctx.clip();
ctx.drawImage('图片的地址', 0, 0, '图片宽度', '图片高度');
//恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以 继续绘制
ctx.restore();
ctx.draw();
}
})
demo:
由于本人也是小程序小白,有什么地方说的不对的还请海涵。
html2canvas给图片添加水印,小程序用Canvas给图片加水印,拼接图片,制作名片相关推荐
- 微信小程序-使用canvas生成含有微信头像的图片并分享
我们的需求是动态生成一个含有微信头像的图片作为分享图片. 我们在页面中添加cancas <view style='position:absolute;left:400rpx;'><c ...
- 小程序使用 canvas 给图片添加水印
小程序使用 canvas 给图片添加水印 操作 canvas 相关的 api 使用的是微信最新提供的 (一路过来踩了好多坑-) 浅用微信小程序 canvas 给图片添加简单水印, 废话不多说, 先上效 ...
- 小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈
小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈 一.概述 需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
- 小程序 uni canvas绘制圆角图片 圆角矩形
小程序 uni canvas绘制圆角图片 圆角矩形 获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
- 微信小程序图片转换成文字_微信小程序中用canvas将文字转成图片,文字自动换行...
onReady: function () { wx.showLoading({ title: '生成图片中...', }) var that = this const ctx = wx.createC ...
- 小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧 最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
- 小程序05 canvas绘图并保存到相册
小程序现在没有提供直接分享到朋友圈的接口,所以只能采取折中的策略,即先将要分享的内容先保存为图片,保存到用户相册,然后再由用户将该图片分享到朋友圈 生成小程序码需要access token,后端生成比 ...
- 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
- 小程序实现canvas添加图文
小程序实现canvas添加图文 笔者今年刚毕业,也没从业经历,难免有代码编写不成熟的地方,欢迎指正 上周开始接触小程序,这里实现的功能类似表情包制作:选择图片.输入文字后保存到本地.目前只是demo ...
最新文章
- ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区
- linux笔记之 开机服务启动的控制,系统日志的查看,防火墙的关闭
- [SCOI2012] 喵星球上的点名
- mysql004子查询.相关子查询.不相关子查询
- [转]程序员真实写真:35岁前成功的12条黄金法则
- 全球硬科技开发者大会(成都)开幕 蓝光发展等超300名开发者「乘风」数字升级...
- native method jvm
- 【AngularJS】—— 13 服务Service
- paip.函数式编程方法概述以及总结
- python,pygame下载与安装详细步骤
- 稳健性估计—— M 估计
- KEIL5添加STC芯片库
- Java itext tiff转换pdf
- ASS/SSA字幕格式
- python3 打包exe 加密_python代码加密之生成exe可执行文件
- jQuery 中console.log什么意思
- 基于大数据的精准营销与应用场景
- Blackmagic摄像机如何处理12K 素材
- (十四)c#Winform自定义控件-键盘(一)
- 国外服务器解决域名备案问题
热门文章
- 汉堡王什么汉堡好吃_汉堡王什么汉堡好吃?隐藏的点单攻略快来看
- win10怎么更新显卡驱动_Intel发布核显新驱动:支持Win10 H2更新、11代酷睿狂喜-Intel,核显,驱动,Win10 ——快科技(驱动之家旗下媒体)-...
- 5.JVM三大性能调优参数:-Xms -Xmx -Xss
- 云主机试用,云主机最高14天试用
- 计算机房温湿度,数据中心机房标准的温湿度范围
- JAVA学习第一步-配置JAVA开发环境和学习资料
- 温莎大学计算机硕士,温莎大学应用计算机硕士申请条件
- win10 提升来宾账户为管理员账户
- [励志][经验]《异类》 -- 格拉德威尔(美)
- 信息熵——与一枚硬币的故事