Vue http图片canvas生成水印,最后生成bas64图片
时间: 2023-10-04 12:04:52 浏览: 99
实现canvas 图片拖拽旋转移动 点击转成base64
3星 · 编辑精心推荐
好的,让我来解答你的问题。
首先,你需要获取到原始图片的base64编码,可以通过Vue的$http模块发送GET请求获取到。
然后,你需要将这个base64编码的图片转换成一个Image对象,可以使用canvas的drawImage方法将图片绘制到一个canvas对象中。
接下来,你需要在canvas中绘制水印。可以通过canvas的fillText方法绘制文字水印,或者使用drawImage方法绘制图片水印。
最后,你将canvas对象转换成base64编码的图片即可。可以使用canvas的toDataURL方法将canvas转换成base64编码的图片,然后将其作为返回值返回给前端。
这个过程中,需要注意的是,由于涉及到跨域请求和canvas操作,可能会有一些安全限制。需要在服务器端进行一些配置和处理,才能正常生成水印图片。
希望我的回答能够帮助到你,如果还有疑问,欢迎继续追问。
阅读全文