【前端canvas】canvas生成图片并下载或预览 uniapp预览图片 & pc下载

最新推荐文章于 2025-05-15 09:28:47 发布

PiPiFamily

最新推荐文章于 2025-05-15 09:28:47 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： canvas使用前端文章标签： uni-app 数学建模 javascript

本文链接：https://blog.youkuaiyun.com/PiPiFamily/article/details/131110016

canvas使用同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

文章介绍了如何在PC页面和uniapp中利用canvas进行绘图后，将图片转换为base64格式并实现下载。在PC页面，通过创建a标签并触发点击事件来下载图片；在uniapp中，使用canvasToTempFilePath方法结合uni.previewImage预览并保存图片。

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

我的另外一篇文章详细讲解了如何使用canvas进行绘图开发 https://blog.youkuaiyun.com/PiPiFamily/article/details/131108351
这篇文章主要分享使用canvas画图后我们会有一些下载保存canvas所画的图片，那么我们的方法就是将图转为base64进行下载

一、pc页面开发

<body>
 <canvas id="temp" ></canvas>
 <script type="text/javascripr">
       const c = document.getElementById('temp')
        const base64Img = c.toDataURL('image/png')
        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = '证书图片' // 设置图片名称
        a.href = base64Img // 将生成的URL设置为a.href属性
        a.dispatchEvent(event)
</script>
也可
<script type="text/javascripr">
       const c = document.getElementById('temp')
        const base64Img = c.toDataURL('image/png')
        var a = document.createElement('a') // 生成一个a元素
       //  document.body.appendChild(a)
        a.download = '证书图片' // 设置图片名称
        a.href = base64Img // 将生成的URL设置为a.href属性
        a.click()
        a.remove()
</script>
 </body>

二、uniapp开发
这里基于vue2框架来进行开发

<template>
 <canvas id="temp" ></canvas>
  </template>
<script>

 export default {
 data:{
        return{
         width : 250
     height: 375,
     }
  }
  methods:{
           viewPhoto1() {
        uni.canvasToTempFilePath({
          canvasId: 'firstCanvas',
          destWidth: this.width * 2, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
          destHeight: this.height * 2,
          quality: 1,
          x: 0,
          y: 0,
          fileType: 'png',
          success: (res) => {
            uni.previewImage({
              // 预览图片  图片路径必须是一个数组
              urls: [res.tempFilePath],
              current: 0,
            })
          },
        })
      },
  }
 }
</script>