uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字

这篇具有很好参考价值的文章主要介绍了uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。

uniapp中使用画布,实现图片的编辑-批量批改图片uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图片不需要这步)

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

2.涂鸦线条可以设置粗细、颜色,this.ctx.draw(true),需要true保留,否则会清空画布

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

3.双指实现缩放,根据双指的距离长短,判断缩放,缩放速度可能比较快,还需要加能控制缩放速度的

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

4.画布上加文字

这里画布的优先级比较高,层级不起作用,输入框在真机上查看时缺少边框,能够绘制文字

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

5.将涂鸦和文字绘制到图片后,生成新的图片

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

6.编辑图片后的效果图

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

7.清空恢复初始化图片

uniapp方微信图片编辑,uniapp小程序,uni-app,微信小程序,小程序

注①:每次涂鸦或者加文字后,会重新生成新的图片,新的图片作为底图,继续进行编辑--该方式会导致图片有些模糊文章来源地址https://www.toymoban.com/news/detail-850798.html

到了这里,关于uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js 在微信小程序中实现3D展厅

            在微信小程序中,使用和构建3D数字孪生应用一直是我的梦想。经过我多年的学习和积累,终于实现了基础的业务功能,并且已经在微信小程序上成功发布、上线。( 目前样式比较丑,待优化的地方还很多,我回努力的 )。       小程序的名称”元宇宙1314”,小程

    2024年02月04日
    浏览(42)
  • uniapp使用threejs-miniprogram在微信小程序加载模型

    1.通过 npm 安装 2.导入小程序版本的 Three.js并创建一个与 canvas 绑定的 three.js  3.创建渲染器 4.创建场景,创建相机,渲染 5.注册GLTF加载器,加载模型添加到场景 threejs-miniprogram/example/loaders/gltf-loader.js at master · wechat-miniprogram/threejs-miniprogram · GitHub 下载 gltf-loader.js 注册gltf-loader 加

    2024年02月08日
    浏览(46)
  • uniapp 使用canvas画海报(微信小程序)

    效果展示:  项目要求:点击分享绘制海报,并实现分享到好友,朋友圈,并保存 先实现绘制海报   下面是海报下面的分享弹窗 因为分享到朋友圈实在没找到有使用自定义按钮的可能,所以还是需要点击右上角胶囊    以上就是画海报以及分享的全部过程了,另有一个点:

    2024年02月13日
    浏览(61)
  • uniapp 开发微信小程序用相机拍照后使用Canvas翻转图片

    傻逼了,兄弟们,uniapp和微信都有一个专门调用手机拍照和相册的api ,拍完照片后会自动根据设备方向翻转,从而始终是正面。如果还想看canvas翻转下面也有    离谱,canvas实例要在onReady里面定义,我找了几个小时才找到。  由于开发需求是要竖着拍照横着返回,所以就必须

    2024年02月13日
    浏览(54)
  • 微信小程序:使用canvas 生成图片 并分享

    废话不多说直接上代码!!!! 最终效果图  

    2024年02月11日
    浏览(59)
  • uniapp微信小程序使用canvas自定义分享名片

    template js 需要分享的页面加上onShareAppMessage,在methods中定义绘画方法createCanvasImage css这里是画布的内容设置

    2024年02月14日
    浏览(52)
  • uni-app:使用 Painter 在微信小程序将当前页面保存为图片

    手机截屏 Painter 实现 方式一:Painter Painter 是一个微信小程序组件,具体介绍和 API 请参考:GitHub文档。 在 GitHub 下载下来之后只需要将 components 下的 painter 文件夹放到项目根目录下的 wxcomponents 文件夹即可。然后就是如何在 uni-app 中使用微信小程序形式的组件,其实很简单,

    2024年02月12日
    浏览(65)
  • 使用taro+canvas实现微信小程序的图片分享功能

    二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。 使用场景及功能:微信小程序 生成海报图片 分享好友 下载图

    2024年02月05日
    浏览(132)
  • 【uniapp】使用canvas组件编译到微信小程序兼容出错问题

    使用uniapp编译跨平台项目会遇到不少兼容问题,这里主要讲canvas组件的,编译到微信小程序会有兼容出错问题,这里给讲一下解决方案,希望有帮助。 如果使用 CanvasContext 绘制,以下代码,编译到微信小程序上可能发现绘制不出来 看canvas组件的属性 type=\\\"2d\\\" 是否有加,要去掉

    2024年02月02日
    浏览(157)
  • 微信小程序使用canvas画布生成二维码海报分享图片(完整示例代码)

    canvas.js //获取应用实例 const app = getApp() Page({ /** 页面的初始数据 */ data: { // canvas _width: 0, //手机屏宽 _heigth: 0,//手机屏高 swiperHeight: 300,//主图图片高度 canvasType: false,//canvas是否显示 loadImagePath: ‘’,//下载的图片 imageUrl: ‘https://cos.myfaka.com/car/service/1.jpg’, //主图网络路径 codeU

    2024年04月12日
    浏览(96)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包