小程序canvas生成海报以及保存相册授权

最新推荐文章于 2024-07-31 13:57:35 发布

Rocky_cx

最新推荐文章于 2024-07-31 13:57:35 发布

阅读量1.1k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/Rocky_cx/article/details/87983575

版权

本文介绍如何在小程序中利用canvas生成海报，并详细讲解了保存相册的授权过程。关键在于调整canvas尺寸以匹配设计图比例，以及处理用户授权的各种情况。示例代码包括wxss和关键的canvas设置，同时展示了生成图片、获取授权、处理用户拒绝及授权成功等不同阶段的效果。

摘要由CSDN通过智能技术生成

小程序使用canvas生成海报以及保存相册授权，上代码

<view bindtap='showModal'>生成海报</view>

<!-- 弹出底部分享操作  -->
<view class="modals-cancel" bindtap="hideModal" hidden="{
  {hideModal}}"></view>
<view class="modals modals-bottom-dialog" >
  <view class="bottom-pos Bottomframe" animation="{
  {animationData}}">
    <button class='CreatePosterBtn' hover-class='none' bindtap='createPoster'>
      <image class='bottom-pos-icon' src='/images/icon_pic.png'></image>
      <view>生成海报</view>
    </button>
    <button class='ShareFriendsBtn' open-type="share" hover-class='none' bindtap='showStoryShare'>
      <image class='bottom-pos-icon' src='/images/icon_sharewx.png'></image>
      <view>分享给朋友</view>
    </button>
  </view>
</view>

<!-- 生成海报 -->
  <view class='imagePathBox' hidden="{
  {maskHidden == false}}">
    <view class='CreateImg' style='margin-left:-{
  {canvasWidth/2}}px;margin-top:-{
  {canvasHeight/2}}px;'>
     <image style="width: {
  {canvasWidth}}px; height: {
  {canvasHeight}}px;" src="{
  {imagePath}}" mode='aspectFill' catchtap='preview_img'></image>
     <image class='closeCanvas' src='/images/icon_close.png' catchtap='closeCanvas'></image>
    </view>
    <view class="saveImage" catchtap="saveImage">
      <image class='btn_login_bg' src='/images/btn_bg.png'>
        <text>保存图片</text>
      </image>
    </view>
  </view>
  
  <view class="canvas-box">
    <canvas style="width: {
  {canvasWidth}}px; height: {
  {canvasHeight}}px; position:fixed;top:9999px" canvas-id="mycanvas" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" />
  </view>  

<!-- 授权弹窗 -->
<view class='open-seting-bg' wx:if='{
  {openSet}}' catchtap='cancleSet'>
  <view class='open-set-inner'>
    <view class='set-title'>请在设置中打开相册权限~</view>
    <view class='btn-openset'>
        <button open-type='openSetting' class='button-style' catchtap='cancleSet'>知道了</button>
    </view>
  </view>
</view>

下面是wxss


/* 整体遮罩层 */
.modals-cancel{
  position:fixed; 
  z-index:101; 
  top:0; 
  left: 0; 
  right:0; 
  bottom: 0; 
  background-color: rgba(0,0,0,.6);
}
.Bottomframe{
  position:fixed; 
  z-index:102; 
  bottom:0; 
  left:0; 
  right:0; 
  padding: 27rpx 0;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
}
.bottom-pos-icon{
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 28rpx;
}
/*动画前初始位置*/
.bottom-pos{
  -webkit-transform:translateY(100%);transform:translateY(100%);
}
.Sh