zoukankan      html  css  js  c++  java
  • 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() {

    },
     
    })
  • 相关阅读:
    MVC在View中页面跳转
    javaEE之------ApectJ的切面技术===标签
    Service的生命周期
    Codeforces Round #253 (Div. 2)
    hdu 3183 A Magic Lamp(给一个n位的数,从中删去m个数字,使得剩下的数字组成的数最小(顺序不能变),然后输出)
    【转】理解红黑树
    概要设计注意事项
    C++ 初始化与赋值
    UE 的使用
    内存泄漏
  • 原文地址:https://www.cnblogs.com/ylblogs/p/9645057.html
Copyright © 2011-2022 走看看