(uniapp)h5图片加水印

写一个uniapp图片加水印,限于h5,当然小程序和App也是可以的,只是返回的不一样,这里是可以在H5用的,然后可以拿到加完水印的图片,废话不多说:
第一步拿到你要加水印的图片地址,先用canvas把图片画出来,(切记一定要在元素加载完在画,不然报错)
(uniapp)h5图片加水印_第1张图片
红框是把图画上去,并把水印加上(看绿框);这样就画上去了,
第二步加完水印以后,我们就要拿到加完水印的图片地址啦;
这里提示一下:

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

(uniapp)h5图片加水印_第2张图片
(uniapp)h5图片加水印_第3张图片
首先在canvasToTempFilePath中拿到uniapp给你保存的地址,然后再通过uploadFile上传服务器返回获取到你能使用的地址;
(uniapp)h5图片加水印_第4张图片
最后JSON.parse(uploadFileRes.data).data;就是你要的地址啦,
是不是挺简单的。。。。记得点赞哈

你可能感兴趣的:(工作遇到的问题,前端)