• canvas 调用本地图片并输出图


    <!--pages/demo/demo.wxml-->
    <canvas canvas-id="myCanvas" style="700px;height:750px"/>
    // pages/demo/demo.js

    Page({

    /**
    * 页面的初始数据
    */
    data: {
    },

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function(options) {
     
    },

    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage('../../image/jc_0.png', -58, -220, 750 / 1.5, 1122)
    ctx.drawImage('../../image/jc_1.png', 45 / 2, 54 / 2, 66 / 2, 66 / 2)
    ctx.drawImage('../../image/jc_2.png', 138 / 2, 52 / 2, 114 / 2, 37 / 2)
    ctx.drawImage('../../image/jc_3.png', 140 / 2, 101 / 2, 107 / 2, 17 / 2)
    ctx.drawImage('../../image/jc_4.png', 370 / 2, 60 / 2, 325 / 2, 47 / 2)
    ctx.drawImage('../../image/jc_5.png', 41 / 2, 177 / 2, 677 / 2, 109 / 2)
    ctx.drawImage('../../image/jc_6.png', 126 / 2, 300 / 2, 148 / 2, 148 / 2)
    ctx.drawImage('../../image/jc_6.png', 304 / 2, 300 / 2, 148 / 2, 148 / 2)
    ctx.drawImage('../../image/jc_6.png', 482 / 2, 300 / 2, 148 / 2, 148 / 2)
    ctx.drawImage('../../image/jc_6.png', 126 / 2, 474 / 2, 148 / 2, 148 / 2)
    ctx.drawImage('../../image/jc_6.png', 304 / 2, 474 / 2, 148 / 2, 148 / 2)
    ctx.drawImage('../../image/jc_6.png', 482 / 2, 474 / 2, 148 / 2, 148 / 2)
    ctx.drawImage('../../image/jc_7.png', 126 / 2, 650 / 2, 120 / 2, 120 / 2)
    ctx.drawImage('../../image/jc_7.png', 254 / 2, 650 / 2, 120 / 2, 120 / 2)
    ctx.drawImage('../../image/jc_7.png', 382 / 2, 650 / 2, 120 / 2, 120 / 2)
    ctx.drawImage('../../image/jc_7.png', 510 / 2, 650 / 2, 120 / 2, 120 / 2)
    ctx.drawImage('../../image/jc_8.png', 136 / 2, 796 / 2, 479 / 2, 37 / 2)
    ctx.drawImage('../../image/jc_9.png', 255 / 2, 846 / 2, 241 / 2, 37 / 2)
    ctx.drawImage('../../image/jc_10.png', 121 / 2, 868 / 2, 509 / 2, 81 / 2)
    ctx.drawImage('../../image/jc_11.png', 0, 986 / 2, 750 / 2, 136 / 2)
    ctx.drawImage('../../image/jc_12.png', 45 / 2, 1030 / 2, 491 / 2, 43 / 2)
    ctx.drawImage('../../image/jc_13.png', 688 / 2, 1038 / 2, 18 / 2, 32 / 2)
    ctx.draw(true, setTimeout(function () {
    wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    700,
    height: 750,
    destWidth: 700,
    destHeight: 750,
    canvasId: 'myCanvas',
    success: function (res) {
    wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    })
    }
    })
    }, 1000))
    //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
    wx.showToast({
    title: '分享图片生成中...',
    icon: 'loading',
    duration: 1000
    });
     
    },

    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function() {
     
    },

    /**
    * 生命周期函数--监听页面隐藏
    */
    onHide: function() {

    },

    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function() {

    },

    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function() {

    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function() {

    },

    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function() {

    },
     
    })
  • 相关阅读:
    android开发聊天输入框at某人的分隔符选取
    使用curl下载小文件的方法记录一下
    google play store注意事项
    android开发使用setOnClickListener点击事件实现双击事件的解决方法
    mac下Android Studio配置文件的路径记录一下
    android studio更新到3.6以上后布局文件不能切换到xml编辑器?那就点进来吧
    mac上使用Xcode编译调试LearnOpenGL源代码的方法
    android开发fragment里面使用百度地图黑屏错位的解决方法
    es7之修饰器
    解决 bash: vue command not found
  • 原文地址:https://www.cnblogs.com/ylblogs/p/9645057.html
Copyright © 2020-2023  润新知