如题,后端给了好几个海报背景原图,都是10001650,甚至更大的图,还给了一些海报内部元素的坐标
如下图所示*↓
我还需要自己根据用户信息,拼接url 生成二维码
需要长按保存或分享微信好友
最终效果如下图所示↓
我该怎么做生成这个海报啊
一个absolute定位div放图片作为背景,然后自己计算下图片缩放比率。得到缩放比率就可以计算写入的元素的位置,往div添加absolute定位元素就行了。
二维码生成可以用jquery.qrcode.js,最后元素添加完后,用html2canvas将整个div转图片重新设置下div.innerHTML为一个img对象加载html2canvas dom转图片后的base64字符串就行。
不想换算可以用canvas来绘制图片后,在调用相关canvas的方法写入元素。canvas使用参考: HTML5 Canvas | 菜鸟教程 HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById('myCanvas'); var canvOK=.. https://www.runoob.com/html/html5-canvas.html
相对来说说第一种比较简单,主要你那种比较熟悉就用那种。有帮助或启发麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
可以考虑使用google的图片处理jar包,可以压缩,调整大小及水印等功能。