(uniapp)h5图片加水印

286 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

写一个uniapp图片加水印,限于h5,当然小程序和App也是可以的,只是返回的不一样,这里是可以在H5用的,然后可以拿到加完水印的图片,废话不多说:

第一步拿到你要加水印的图片地址,先用canvas把图片画出来,(切记一定要在元素加载完在画,不然报错)

image.png 红框是把图画上去,并把水印加上(看绿框);这样就画上去了,

第二步加完水印以后,我们就要拿到加完水印的图片地址啦;
这里提示一下:

一定要在draw里面写哦,不然拿到的可能是空的

image.png

image.png 首先在canvasToTempFilePath中拿到uniapp给你保存的地址,然后再通过uploadFile上传服务器返回获取到你能使用的地址;

image.png 最后JSON.parse(uploadFileRes.data).data;就是你要的地址啦,
是不是挺简单的。。。。记得点赞哈