H5页面使用html2canvas实现div+图片生成为图片

网上找了好多种方法都不能完美的将div生成图片，要么是太模糊，要么是尺寸不对，最后得知，只需用最新的html2canvas.min.js文件就行了，真是踏破铁鞋无觅处，得来全不费工夫。
1：不要使用背景图片，背景图片放大图片会模糊，需要改成使用img
2：请下载最新版本html2canvas 官方链接

html
<div ref="preImg" class="preImg" ><view class="img-hjzs" @click="openPreImg3(idx)"><img class="altImg" src="" alt="">
</div>
js
openPreImg3(i) {html2canvas(this.$refs.preImg[i]).then((canvas) => {let url = canvas.toDataURL("image/jpeg", 1.0) // 最终生成图片的 url})},

H5页面使用html2canvas实现div+图片生成为图片相关推荐

H5页面使用html2canvas实现div生成为图片，保存到手机
在做微信公众号H5页面时,需求要求html页面生成base64图片,并保存到手机相册中.之前没做过,在网上搜了相关的资料.了解到了html2canvas.js. html2canvas首先将页面生成c ...
前端 canvas toDataURL() 转图片生成空白图片问题
这里写自定义目录标题前端 canvas toDataUrl() 转图片生成空白图片问题感谢大神解决方法问题发生解决办法原理 vue项目中的使用总结 2022-05-17追加修改前端 ca ...
h5页面使用html2canvas实现分享海报
这段做了一个nft数藏类项目,h5版本里需要实现一个分享海报的功能,总结如下. 功能简单来说就是,使用html2canvas生成海报图片,在pc端可以显示下载按钮可以下载海报,在手机端可以使用手机浏览 ...
利用html2canvas截取div保存为png图片并下载
Html2canvas是什么? 是一个脚本这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100%的准确度,因为它 ...
微信H5页面用Html2canvas生成图片的几种方式
Demo:仅供参考,实际业务场景请根据自己的需求修改(本案例提供的是思路和实现方式) <!DOCTYPE html> <html> <head><meta c ...
vue使用html2canvas截取div内容生成海报~ vue生成海报
最近项目有需求需要把生成海报.就在网上查了一些资源记录一下. 首先就是下载依赖了.老规矩: npm i html2canvas 然后在需要的组件里面引用: import html2canvas fro ...
Android webview支持H5页面通过js实现文件上传、图片上传
一.问题场景: 项目中遇到通过网页上传文件的需求,IOS直接是支持的,安卓端却没反应,有些机型甚至闪退.其实是Android的webview默认是不支持<input type="fil ...
微信H5页面调起相册和摄像头，实现图片上传，并上传到本地服务器
1.config权限配置 $.ajax({url:'wx_getConfig', type:'get',dataType:'json',async:false,success:function(dat ...
用vue实现H5页面托拽的div(兼容pc与移动端)
首先看效果图 PC端移动端首先实现拖拽需要知道三个事件,按下,移动和抬起 PC端鼠标按下事件:onmousedown鼠标移动事件:onmousemove鼠标抬起事件:onmouseup 移动端 ...

H5页面使用html2canvas实现div+图片生成为图片

H5页面使用html2canvas实现div+图片生成为图片相关推荐

最新文章

热门文章