前端生成分享海报的几种方法

这篇具有很好参考价值的文章主要介绍了前端生成分享海报的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,使用painter插件

   适用于微信小程序及uniapp的小程序端

①,引入插件painter

   克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter

   下载的painter放到微信小程序的components目录下

②在json文件中引入

"usingComponents": {

        "painter":"/components/painter/painter"

},

注:在uniapp生成小程序中,painter插件需要放在wxcomponents目录下

③wxml文件中引入painter

<painter palette="{{paletteInfo.data}}" 

bind:imgOK="shareImageOkAction" 

bind:imgErr="shareImageErrAction"

 widthPixels="1080" />

④  创建 paletteInfo 数据

let textLeftCss = {
         fontSize: '28rpx',
         height: `66rpx`,
}

let views = []
views.push({
        id: "imgBg",
        type: "image",
        url: this.finalPic,
        css: {
                top: 0,
                width: '750rpx',
                mode: 'widthFix',
                }
         }, {
         id: "rectBG",
         type: "rect",
         css: [{
                width: "718rpx",
                 height: `${this.guigeList.length * 80 + this.stepList.length * 262 + 24}rpx`,
                  top: `658rpx`,
                 left: "16rpx",
                 color: 'linear-gradient(-180deg, #E7F3FF 0%,  #FFFFFF 50%)',
                shadow: '0rpx 4rpx 16rpx #F4F4F4',
                borderRadius: '16rpx'
          },textLeftCss ]
})

let paletteInfo = {
          width: "${width}px",
          height: `${height}px`,
          background: "#fff",
          views: views
 }

this.painterInfo = {
        height: height,
        data: paletteInfo
  }

⑤ 图片生成成功/失败的回调

shareImageOkAction(e) {

    console.log('生成图片路径: ', e.detail.path)

  },

shareImageErrAction(err) {

    console.log('图片生成失败: ', err)

  },

海报生成后,可以调用微信的wx.saveImageToPhotosAlbum和wx.showShareImageMenu来保存图片或者分享给好友,

2. 使用 snapshot 组件(适用于微信小程序原生开发)

  1. 使用 wxml 绘制海报内容

  2. 使用 snapshot 组件包裹海报的 wxml

  3. 调用 takeSnapshot 获取图片数据

  4. 调用 fs.writeFileSync 将海报数据写入本地文件

  5. 调用 wx.saveImageToPhotosAlbum 将海报保存到本地 

  参考链接小程序生成海报,全新组件一个就好通过 Skyline snapshot 新组件,小程序快速生成海报,营销活动新法宝!https://mp.weixin.qq.com/s/GOzwCBpnzn51R-TBDbf2Ag?poc_token=HAN3YGWjr8BT5Tqo2z2vSJGlK7DnqITgJF_TJS73

 3,使用  htmltocanvas 插件(适用HTML)

 ①,获取需要生成海报的dom元素

const dom = document.getElementById('canvas')

②生成海报链接

htmltocanvas(dom, {
                      width: dom.clientWidth,   //dom 原始宽度
                      height: dom.clientHeight,
                      scrollY: 0, // html2canvas默认绘制视图内的页面,需要把scrollY,scrollX设置为0
                      scrollX: 0,
                      useCORS: true, //支持跨域
                      // scale: 2, // 设置生成图片的像素比例,默认是1,如果生成的图片模糊的话可以开启该配置项
                    }).then((canvas) => {
                        console.log(canvas.toDataURL('image/png'));

                         this.this.h5canvasImgPath = canvas.toDataURL('image/png');
                    }).catch(err=>{
                        uni.hideLoading();
                        // console.log('失败',err);
                    })

③保存图片

                var arr = this.h5canvasImgPath.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
                  while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                  }
                  // 将Blob对象转换成文件并下载到本地
                  var blob = new Blob([u8arr], {
                    type: mime
                  });
                  var a = document.createElement('a');
                  a.download = '海报.png';
                  a.href = URL.createObjectURL(blob);
                  a.click();文章来源地址https://www.toymoban.com/news/detail-831988.html

到了这里,关于前端生成分享海报的几种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 如何测试网速? 本地测网速的几种方法分享

    今天在yii666虎门装机QQ群中不少朋友讨论了关于如何测试网速?大家给出了很多测试网速方法,比如常见的运用下载东西去判断下载速率从而判断网速,另外也有朋友说使用在线网速测试工具或一些电脑少毒软件自带的测试网速的工具去测试都是可以的,其实笔者觉得方法有

    2024年02月05日
    浏览(61)
  • 分享Linux 查看内存使用情况的几种方法

    Linux 查看内存使用情况的几种方法包括使用 free 命令、top 命令、htop 命令、vmstat 命令和/proc/meminfo 文件。这些方法可以帮助用户了解系统内存的使用情况,包括总内存、已用内存、空闲内存、缓存和交换分区等信息。 在运行 Linux 系统的过程中为了让电脑或者服务器以最

    2024年02月04日
    浏览(49)
  • 解决前端跨域的几种方法

    一、跨域报错         在我们实际开发过程中,都有遇到过跨域的问题,跨域报错如下: 二、为什么会报跨域?         跨域的本质是浏览器基于同源策略的一种安全手段,主要是考虑到用户的信息安全。何为同源策略呢?同源策略是一种约定,它是浏览器最核心也

    2024年02月09日
    浏览(48)
  • 前端展示 PDF 预览的几种方法

    一、js实现pdf预览 HTML 内联框架元素 iframe 表示嵌套的 browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。 HTML embed 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源(如浏览器插件)提供 HTML object 元素(或者称作 HTML 嵌入对象元素)

    2024年02月09日
    浏览(43)
  • 前端开发中,定位bug的几种常用方法

    目录 第一章 前言 第二章 解决bug的方法 2.1 百度 2.2 有道翻译 2.3 debugger 2.4 console.log 日志打印 2.5 请求体是否携带参数 2.6 注释页面渲染代码 2.7 其他 第三章 尾声 备注:该文章只是本人在工作/学习中常用的几种方法,如果有不对大家“胃口”的地方,勿喷,可以在评论区提供

    2024年02月04日
    浏览(48)
  • 前端文件上传识别文件类型的几种方法,快看你是哪个?

    在我们的日常开发过程中,我们会经常接触到一些文件上传的事情,其中在前端这边识别识别文件类型的是非常常见的功能,例如来限制文件上传的类型,接下来我们来了解一下最常见的几种方式。 最简单快捷的方法就是 hiyaJavaScript 获取文件名的扩展名,对比扩展名来判断

    2024年02月20日
    浏览(45)
  • Python开发之Python导包的几种方法,自定义包的生成以及导入详解

    Python是一种跨平台的计算机程序设计语言。 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越多被用于独立的、大型项目的开发。 下面介绍python的几种导包方式。 1.

    2024年02月08日
    浏览(36)
  • 解决前端VUE前端框架报错Error: error:0308010C:digital envelope routines::unsupported的几种方法

    主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制,nodeJs v17 之前版本没影响,但 V17 和之后版本会出现这个错误。 **方案1:**打开IDEA 终端,直接输入 **方案2:**打开IDEA 终端,直接输入(问题解决) **方案3:**卸载当前版本,安装合适的版本

    2024年02月04日
    浏览(50)
  • 微信小程序实现生成分享海报案例

    一、引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的 painter 放到小程序的 components 目录下 二、页面中引入插件 (1)页面的 json 文件 (2)页面的 wxml 文件 其中 painter 插件可以获取绘制出来的图片路径, image 标签展示出来 三、绘制海报 1、

    2024年02月08日
    浏览(94)
  • 小程序生成分享海报图片并保存相册

    最近开发的小程序都有分享需求,功能大体为点击分享按钮,或主动生成海报后,用户操作保存对应海报为图片实现分享。以下是具体实现。 最终生成效果如图: 此处主要是生成工具库来生成普通二维码,如果要生成小程序码,只能通过后台接口调用开放API实现,且需要小

    2024年02月16日
    浏览(68)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包