小程序绘画canvas变成图片并且分享，保存功能实现

最新推荐文章于 2024-07-22 18:18:11 发布

小巫星

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量286

点赞数 1

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/zha_w/article/details/116738403

版权

笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在小程序中将canvas绘画内容转换为图片，并实现保存及分享功能。通过设置相关数据并调用微信API wx.previewImage，完成从canvas到图片的预览与分享操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas绘画

wxml canvas代码。

 <canvas class='canvas'  style="width:{{code_w}}px;height:{{code_w}}px;" canvas-id='canvas' bindlongtap='save'></canvas>
 <image class='canvas' src="{{tempFile}}" style=" width:{{code_w}}px;height:{{code_w}}px;" bindtap="Sharing"></image>

js代码
data:{
text: ‘链接’,
image: ‘图片’,
code_w: code_w,
tempFile:‘保存’,
}

//加载的时候生成[图片
 onLoad: function (options) {
 			//我这边生成二维码方法是 调用QR code 生成
        qrcode = new QRCode('canvas', {
           // usingIn: ac,
            text: ‘链接’,
            // image: '/images/bg.jpg',//图片
            width: code_w,//二维码 宽
            height: code_w,//二维码 高
            colorDark: "#1CA4FC",//交替颜色
            colorLight: "white",//交替颜色
            correctLevel: QRCode.CorrectLevel.H,  
        });
		 var that=this
		wx.showLoading()//加载
        //设置时间器
        setTimeout(function () {
            wx.hideLoading();
            //将canvas转换成图片
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              canvasId: 'canvas',//wxml中canvasid定义的id
              success: function (res) {
                console.log(res)
                console.log('图片',res.tempFilePath)//生成的路径
                var tempArr = []
                tempArr.push(res.tempFilePath)
                console.log(tempArr)
                that.setData({
                  tempFile: tempArr//保存路径
                })
              },
              fail: function (res) {
              }
            })
          }, 1000)

点击图片跳转至新页面操作进行保存和分享个朋友

	//点击跳转 进行分享操作 只能在真机调试里面显示 分享操作和保存图片操作
	Sharing:function(event){
        console.log(this.data.tempFile)
        var path=this.data.tempFile//获取路径 
        console.log(path)
        wx.previewImage({
          urls: path,//路径
           showmenu:true,//是否显示菜单
          current:path,//显示图片
          success:function(res){
              console.log(res)
          },fail:function(res){
              console.log(res)
          }
        })
    }

微信文档 wx.previewImage相关参数.
以上就是绘画转图片和分享操作