微信小程序生成二维码、生成图片、保存图片到本地相册

最新推荐文章于 2024-08-10 12:31:17 发布

Mh_ui

最新推荐文章于 2024-08-10 12:31:17 发布

阅读量8.1k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/Mh_ui/article/details/84032864

版权

本文详细介绍了如何在微信小程序中实现二维码的生成，同时讲解了将生成的图片保存到用户手机本地相册的操作流程，涵盖了微信小程序的API调用和相关图像处理技术。

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

<!--画布遮罩-->
<!--生成二维码的画布-->
<canvas canvas-id="myCanvas" style='width:{
  {ercode_canvasWidth}}px;height:{
  {ercode_canvasHeight}}px;left: -300rpx'/>
<view wx:if="{
  {modalDisplay}}" class="mask">
    <view class="modal-container">
      <view class="modal-close">
        <text bindtap="closeRejectModal">✕</text>
      </view>
      <view class="modal-text">
        <view class="canvas-box">
          <!--生成图片的画布-->
          <canvas canvas-id="shareCanvas" style='width:{
  {canvasWidth}}px;height:{
  {canvasHeight}}px;margin:{
  {canvasWidth_y}}px auto 0 auto;box-shadow:0px 7px 20px 4px rgba(143,143,143,0.29);
disable-scroll='true'></canvas>
        </view>
      </view>
      <view class="modal-button">
        <text>保存图片到本地相册，分享给好友</text>
        <button  class="but" bindtap='savePic'>保存图片</button>
      </view>
    </view>
 </view>

var QR = require("../../utils/qrcode.js");//前端自己生成二维码的js插件
//qrcode.js下载地址：https://github.com/davidshimjs/qrcodejs
Page({
  data: {
    qrCodeImg: '',          //要生成的二维码图片链接
    qrCodeImgs: '',         //二维码图片
    modalDisplay: false,    //是否显示遮罩
    postUrl: '',            //大图
    canvasWidth: '',        //画布宽度
    canvasHeight: '',       //画布高度
  },

  /**生命周期函数--监听页面初次渲染完成*/
  onReady: function () {
    let that = this;
    wx.getSystemInfo({
      success(res) {
        let scrollHeight = res.windowHeight - 233 - 43;
        let ratio = 750 / res.windowWidth; 
        that.setData({
          scrollHeight: scrollHeight,
          win