uniapp 图片生成

通过插件 html2canvas 实现图片生成

利用dom节点进行canvas绘制成base64的图片，相当于将html页面转为图片

1.安装

npm install --save html2canvas

2. 引用

import html2canvas from "html2canvas
export default{data(){return{imgUrl:"", // 用于存储base64图片}}
}

3. 生成图片

<view><!-- 需要使用div来进行使用,否则会保存,ref来指定你需要截屏的dom --><div id="htmlCanvas" ref="imgCanvas"><!--想要保存的图片内容在此放置-->             </div>
</view>

toImage(){html2canvas(this.$refs.imgCanvas,{backgroundColor: null,useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题}).then((canvas)=>{let url = canvas.toDataURL('image/png')this.imgUrl = url// 调用原生方法进行图片保存this.$bridge.callhandler("保存图片方法名", {imageurl:this.imgUrl});                 })
},

4. 注意

保存图片必须在页面中显示才可以保存，可以做成弹窗形式进行保存

uniapp 图片生成相关推荐

uni-app如何生成海报图片
项目场景: 在uni-app中,通过点击邀请分享海报的方式,可以展示不同的海报,并通过扫描海报上的二维码来实现用户之间的关系绑定,从而实现分销功能: 每次生成的海报样式都可能不同,可以根据后台配置的宽 ...
uniapp 图片预览实现
uniapp 图片预览实现提示:下面案例可供参考一.app端使用 uni.previewImage 进行图片预览可去 uniapp官网查看具体使用:(https://uniapp.dclou ...
可视化uniapp 自动生成代码项目
免费使用可视化uniapp 自动生成代码项目 1.重点优化了flex布局,flex布局目前支持文本内容.图片.头像图标.按钮.标签 2.可以拖拽到相应的flex容器中.插入的收获可以选择插入位置,右侧 ...
uni 根目录路径_如何解决uniapp图片路径错误问题
uniapp图片路径错误的解决办法:1.在根目录"manifest.json"中配置h5下的"publicPath":2.在h5配置中运行的基础路径进行配置即可 ...
【工具】TFT彩屏图片点阵取模工具，Img2Lcd图片取模软件，图片生成c语言头文件...
微信关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 最近玩童心派,上边有个128x128的彩屏,当然也是必须玩的,如何让彩屏显示图片呢?方 ...
thinkphp3.2与phpexcel带图片生成完美案例
thinkphp3.2与phpexcel完美案例 // 导出exlpublic function look_down(){$id = I('get.id');$m = M ('offer_goods' ...
简单的错觉画_错觉图片生成实验 - 正方形错觉
(图书介绍:童晶:<C和C++游戏趣味编程>新书预告) 这学期的线下C语言课程,大一同学们学完旋转蛇案例后(童晶:第4章旋转蛇(<C和C++游戏趣味编程>配套教学视频)),布 ...
Python批量导入图片生成能治疗颈椎病的HTML5版课件
本文要点:Python文件操作,HTML5的figure元素和CSS3属性的用法. 说明:1):本文图片来自于相关阅读中Python批量导出多个PPT/PPTX文件中每个幻灯片为独立JPG图片或Pyt ...
thumbnails 变黑_phpcms v9图片生成缩略图变成黑色解决方法
今天客户反映,上传的图片生成缩略图有的图片变成黑色, 出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码. ...
错觉图片生成实验 - 旋转花
(图书介绍:童晶:<C和C++游戏趣味编程>新书预告) 这学期的线下C语言课程,大一同学们学完旋转蛇案例后(童晶:第4章旋转蛇(<C和C++游戏趣味编程>配套教学视频)),布 ...

uniapp 图片生成

uniapp 图片生成相关推荐

最新文章

热门文章