微信小程序canvas绘图绘图完成保存图片附带代码和效果图

最新推荐文章于 2024-09-14 16:14:53 发布

張張yyy

最新推荐文章于 2024-09-14 16:14:53 发布

阅读量1.9k

点赞数 2

文章标签：前端微信小程序

本文链接：https://blog.csdn.net/m0_64205744/article/details/123792007

版权

本文介绍如何在微信小程序中使用canvas进行绘图，并详细讲解如何将canvas内容转化为图片保存到相册和本地。包括canvas尺寸设定、图片与文字布局，以及代码示例（wxml、wxss、js）。对于初次接触canvas的开发者，这是一个实用的入门教程。

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

保存图片的页面

保存下来的图片

以上就是效果图啦，接下来就是怎么实现它了

首先定义canvas的大小，绘制图片以及文字的布局

将canvas内容生成图片并保存到相册和本地

上代码啦！！自行解析

wxml

<nav-bar navbar-data='{
  {nvabarData}}'></nav-bar>
<view class="zan_dialog__mask" bindtap="toggleDialog"></view>
<canvas canvas-id="myCanvas" style='width:{
  {canvasWidth}}px; height:{
  {canvasHeight}}px; '  disable-scroll='true'/>

<button class="shareBtn" bindtap="saveImg">保存图片</button>

wxss

canvas {
    width: 90%;
    height: 860rpx;
    margin: 0 auto;
    margin-top: 20vh;
    z-index: 10;
}

.zan_dialog__mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9;
}

.shareBtn {
    width: 360rpx;
    height: 80rpx;
    font-size: 30rpx;