将网页元素生成图片保存 div生成图片 html2canvas完美解决跨域 html2canvas图片不显示 html2canvas生成偏移 填坑之路

哎,哎,哎,哎,哎...

什么破html2canvas...

太不好用了,但是没办法,也只有这个插件目前比较完善,写个DEMO分享给大家

 

效果演示

将网页元素生成图片保存 div生成图片 html2canvas完美解决跨域 html2canvas图片不显示 html2canvas生成偏移 填坑之路_第1张图片

解决图片跨域问题,添加下方参数

allowTaint: true

添加后,useCORS: true 这个就不需要了,可删除

 

生成图片偏移问题

生成图片偏移问题,网上看是要修改X和Y的偏移量为0,我修改了没反应,最后我引入最新版本的html2canvas就解决了,真无语,可能自己太菜了,好像本来就很菜。

 

二维码区域生成,可去查看我另篇文章 https://blog.csdn.net/tianpeng1996/article/details/106281528

 

附完整代码




	
	海报生成器
    
    
	


	

我是标题呀

我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍

长按识别  二维码 精彩内容  享不停
生成海报

以上只是完整demo,可以正常使用,不是我的最终效果,自行修改吧。

demo中的图片使用的外链形式,不会出现跨域问题,放心使用吧。

发现的坑,生成时候,文字内容有空格,无法识别,还需要 才可以;本来文字详情区域,我用css写了多行显示省略号,不支持,生成图片之后为空白,如果需要实现,请使用js自行写吧。

 

demo下载

https://download.csdn.net/download/tianpeng1996/12530166

个人博客

前端博客 http://sharedblog.cn

资源博客 http://iqzhan.com

 

从兴趣到放弃

哎,不会php,获取不了文章封面,懒得研究了,实现不了我需要的效果,放弃,放弃,放弃了,最终半成品代码

将网页元素生成图片保存 div生成图片 html2canvas完美解决跨域 html2canvas图片不显示 html2canvas生成偏移 填坑之路_第2张图片




	
	海报生成器
    
    
	


	

我是标题呀

我a3是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍

长按识别  二维码 精彩内容  享不停
×
生成海报

 

你可能感兴趣的:(js,前端,javascript,html5,html2canvas)