【微信小程序生成海报保存到相册】

常安cc

已于 2022-08-23 11:36:27 修改

阅读量791

点赞数

分类专栏：前端微信小程序文章标签：微信小程序小程序

于 2022-08-22 18:31:59 首次发布

本文链接：https://blog.csdn.net/m0_55546349/article/details/126471066

版权

本文介绍了微信小程序中如何动态生成海报并保存到相册。重点讲解了在canvas上绘制图片时，如何处理不同尺寸图片的拉伸、压缩和裁剪问题，特别是drawImage函数的使用，包括其三种不同的用法，以及在商品分享场景下裁剪图片的必要性。

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

微信小程序生成海报保存到相册

如图
需要先有设计图的尺寸
在这里插入图片描述

在canvas绘图时，通常会遇到的一种情况是用固定宽高来显示图片，如果直接把图片内容填充进去的话，显示出来的图片就会被压扁或者被挤瘦，其效果简直不忍直视！那么，就需要把图片进行拉伸、压缩或裁剪。

接下来，先给 drawImage 做个介绍：

canvas的drawImage函数可以绘制图像到画布。

它有以下参数：

参数类型说明

参数	说明

imageResource	所要绘制的图片资源
sx	源图像的矩形选择框的左上角 x 坐标
sy	源图像的矩形选择框的左上角 y 坐标
sWidth	源图像的矩形选择框的宽度
sHeight	源图像的矩形选择框的高度
dx	图像的左上角在目标 canvas 上 x 轴的位置
dy	图像的左上角在目标 canvas 上 y 轴的位置
dWidth	在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
dHeight	在目标画布上绘制图像的高度，允许对绘制的图像进行缩放

这里再来一张图
在这里插入图片描述

它有三种写法：

只规定原始图片开始剪切的位置，默认填充剩余宽高到画布上

drawImage(imageResource, dx, dy)

从指定位置裁剪原始图片指定宽高，填充到画布上

drawImage(imageResource, dx, dy, dWidth, dHeight)

从指定位置裁剪原始图片指定宽高，从指定位置开始显示到画布上指定宽高

drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

这里如果需要裁剪图片的话需要用到第三种。

因为分享商品图片的话，图片的大小不固定，需要裁剪。
裁剪图片，借鉴这里


<!-- canvas -->
<view class="container">
    <button catchtap="showPic">点击生成海报</button>

    <!-- 分享 S -->
    <view class="share-cover" wx:if="{
    {showSharePic}}" catchtouchmove='true' catchtap='closeShare'>
    </view>
    <view class="share-pic-box" wx:if="{
    {showSharePic}}" >
        <view class="share-pic">
            <image src="{
    {sharePicUrl}}" class="sharePic"></image>
        </view>
        <button class="share-tips" catchtap='savePic'>保存图片</button>
        <!-- <view class="close-share" catchtap='closeShare'></view> -->
    </view>
    <!-- 分享 E -->

    <!-- canvas S -->
    <canvas canvas-id="shareFrends" class="canvas"></canvas>
    <!-- canvas E -->
</view>



/* fx */
.share-cover {
   
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 101;
}

.share-pic-box {
   
    width: 640rpx;
    height: 1080rpx;
    border-radius: 24rpx;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 999;
}

.share-pic {
   
    width: 640rpx;
    height: 1080rpx;
    border-radius: 24rpx;
    background: #fff;
    margin-bottom: 40rpx;
    overflow: hidden;
}

.share-tips {
   
    width: 70% !important;
    height: 44px;
    box-sizing: border-box;
    background: #FF3B3B;
    opacity: 1;
    border-radius: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 44px;
    color: #FFFFFF;
    padding: 0 !important;
}

/* .close-share {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    top: -25rpx;
    right: -25rpx;
    border-radius: 50%;
    z-index: 101;
    background-color: #fff;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAALVBMVEUAAAAzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMFCKs1AAAADnRSTlMAAwGYnKilo/Tpjn6RhfLwgGgAAAB3SURBVAjXY7hxiAEEhLsZ+p4oABmMcS8Z7N45AVmi714xiL8DCjLGvTNiYKx75wQUeqzAABJUBAkxgARdwUIgwXcgIbAgVAik8QmEJQqUdYIKmYEFQWYp5gEFIcaLAQUhxjOCBP3AZokBXdAHMgso+JJh5yKoSwHamjhPbLDp2gAAAABJRU5ErkJggg==);
    background-size: 18rpx 18rpx;
    background-repeat: no-repeat;
    background-position: center center;
} */

.sharePic {
   
    width: 640rpx;
    height: 1080rpx;
}

.canvas {
   
    width: 1280rpx;
    height: 2160rpx;
    position: fixed;
    top: -