搜索
简帛阁>技术文章>前端使用html2canvas截图,在canvas上绘制图片及保存图片

前端使用html2canvas截图,在canvas上绘制图片及保存图片

1、使用html2canvas
存在的问题:
不同的机型绘制位置不同的问题。
这个主要因为Html动态设置了html的dpr。(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字的问题)。
但是在绘制canvas时最好屏蔽这个属性。这个属性确定会导致html2canvas生成的canvas的尺寸不同。导致重新在此canvas里绘制图片时,在不同机型上显示的位置有出入。
使用canvas时一定要注意toDataUrl的跨域问题
 
2、点击保存图片
目前只有H5的,download方法。但是在手机上通用性不强。
只有和客户端交互的方式来保存图片。
 
3、生成2维码图片(qr_code)
4、长按保存图片(直接生成图片覆盖在Html,浏览器会自动弹出是否保存图片)

1、使用html2canvas存在的问题:不同的机型绘制位置不同的问题。这个主要因为Html动态设置了html的dpr。(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字的问
使用官网的CDN:<scriptsrchttp://html2canvashertzencom/dist/html2canvasminjs></script>网上可以查到很多
1后端支持:图片要是cdn的地址,并且允许图片跨域,header头中设置应为AccessControlAllowOrigin:*2前端配置1varopts{2scale:scale,//添加的sca
html2canvas把h5网页保存图片想把一个网页得某些元素,绘制图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制图片html2canvas这个插件可以
之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的html2canv
使用方法项目中引入npminstallhtml2canvashtml代码//html代码<!把需要生成截图的元素放一个元素容器里,设置一个ref><divclassimage_to
第一步,把网页保存Canvas画布,借助于html2canvas库,http://html2canvashertzencom/html2canvas(documentgetElementById("
问题首先说说遇到了什么问题。首先有这么一个需求。需要前端根据后端传过来数据,动态的生成图片图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用html2canvas生成的canvas
vardataURL;html2canvas(documentquerySelector(poster_template_con),{useCORS:true,logging:true})then(
利用JavaScript将页面截图生成图片传给后台的插件:html2canvas一、总结一句话总结:10<scripttypetext/javascript>11functiontake