小程序生成长图（预览，不限高度）+小程序码+小程序码中间logo换成自定义logo

原创

于 2019-06-18 18:08:44 发布 · 4.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#生成长图 #画布 #小程序码中间logo替换

这篇博客探讨了在小程序中生成长图并实现预览的方法，包括不限高度的画布设置、在长图中绘制小程序码，以及替换小程序码中间的默认logo为自定义logo。通过WXML创建画布，JS定义参数，WXSS设置样式，以及JS处理分享图生成和保存过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上条博客已经介绍了如何云调用生成小程序码，链接地址：
https://blog.youkuaiyun.com/mingjuna2010/article/details/92796711
这条博客我们来介绍小程序中怎么生成长图，如何预览，并且在长图中绘制小程序码，以及小程序码中间的默认logo换成自定义logo。
①首先在页面上 index.wxml 准备一个画布，画布的宽度设定，高度不定。由于高度不定，所以预览时画布是不显示在页面上的，只提供画图功能，显示在页面上的是image标签，外层使用swiper-view，进行长图的上下滑动预览，视觉效果加上蒙层，代码如下：

<!-- 显示在页面上的image标签，即长图 -->
<scroll-view class="temp_day_box" style='max-height:900rpx;' scroll-y wx:if="{
  
  {sharing}}">
  <view>
     <image class="canvas_img" style='height:{
  
  {height*2}}rpx' src='{
  
  {shareImgSrc}}'></image>
  </view>
</scroll-view>

<!--显示长图是背景变暗，即蒙层-->
<view class="mask" catchtap='shareStop' catchtouchmove='preventTouchMove' wx:if="{
  
  {sharing}}"></view>

<!-- 不显示在页面上的画布-->
<canvas class='canvasHigh' style="height:{
  
  {height*2}}rpx" canvas-id='share'></canvas>